vibefast-cli 0.2.4 → 0.3.1

package/2/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/2/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';

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

@@ -0,0 +1,89 @@
+import { Alert, View } from 'react-native';
+
+import { Button, Icon, List, Text } from '@/components/ui';
+
+import { AudioPlayer } from './audio-player';
+
+export interface Recording {
+  uri: string;
+  name: string;
+  date: string;
+}
+
+export interface RecordingListProps {
+  recordings: Recording[];
+  onDeleteRecording: (uri: string) => void;
+}
+
+export function RecordingList({
+  recordings,
+  onDeleteRecording,
+}: RecordingListProps) {
+  const handleDelete = (uri: string) => {
+    Alert.alert(
+      'Delete Recording',
+      'Are you sure you want to delete this recording?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: () => onDeleteRecording(uri),
+        },
+      ],
+    );
+  };
+
+  const renderItem = ({ item }: { item: Recording }) => (
+    <View className="my-1 rounded-lg border border-neutral-300 p-3 dark:border-neutral-800">
+      <View className="mb-2 flex-row items-center justify-between">
+        <View className="flex-1">
+          <Text className="pr-2 text-base font-semibold">{item.name}</Text>
+          <Text className="text-xs text-muted">{item.date}</Text>
+        </View>
+        <Button
+          variant="ghost"
+          size="icon"
+          onPress={() => handleDelete(item.uri)}
+          className="size-8"
+        >
+          <Icon name="trash" size={18} />
+        </Button>
+      </View>
+      <AudioPlayer
+        source={{ uri: item.uri }}
+        shrinked={true}
+        showWaveform={true}
+        showTimer={true}
+        showProgressBar={false}
+        showControls={true}
+        style={{ className: 'm-0 p-0 bg-transparent' }}
+        // Only shrink waveform, keep normal button sizes
+        waveformHeight={50}
+        waveformBarCount={45}
+        waveformBarWidth={2.5}
+        waveformBarGap={1}
+        controlButtonSize={20}
+        playButtonSize={24}
+      />
+    </View>
+  );
+
+  return (
+    <View className="flex-1">
+      <List
+        data={recordings}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.uri}
+        ListEmptyComponent={
+          <View className="items-center p-4">
+            <Text>No recordings saved.</Text>
+          </View>
+        }
+        contentContainerStyle={{ paddingHorizontal: 8, flexGrow: 1 }}
+        showsVerticalScrollIndicator={false}
+        nestedScrollEnabled={true}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Switch, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+
+import { AudioPlayer } from '../components';
+
+export function AudioPlayerDemo() {
+  const [showControls, setShowControls] = useState(true);
+  const [showWaveform, setShowWaveform] = useState(true);
+  const [showTimer, setShowTimer] = useState(true);
+  const [showProgressBar, setShowProgressBar] = useState(true);
+
+  const remoteAudioSource = {
+    uri: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+  };
+
+  const renderToggle = (
+    label: string,
+    value: boolean,
+    onValueChange: (value: boolean) => void,
+  ) => (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 8,
+      }}
+    >
+      <Text>{label}</Text>
+      <Switch value={value} onValueChange={onValueChange} />
+    </View>
+  );
+
+  return (
+    <View style={{ width: '100%', gap: 16 }}>
+      <Text className="text-center text-lg font-bold">Audio Player Demo</Text>
+      <AudioPlayer
+        source={remoteAudioSource}
+        showControls={showControls}
+        showWaveform={showWaveform}
+        showTimer={showTimer}
+        showProgressBar={showProgressBar}
+        autoPlay={false}
+        onPlaybackStatusUpdate={(status) =>
+          console.log('Playback status:', status)
+        }
+      />
+      <View
+        style={{
+          padding: 16,
+          marginTop: 16,
+          backgroundColor: '#f0f0f0',
+          borderRadius: 8,
+        }}
+      >
+        <Text className="text-md mb-2 font-bold">Player Options</Text>
+        {renderToggle('Show Controls', showControls, setShowControls)}
+        {renderToggle('Show Waveform', showWaveform, setShowWaveform)}
+        {renderToggle('Show Timer', showTimer, setShowTimer)}
+        {renderToggle('Show Progress Bar', showProgressBar, setShowProgressBar)}
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+
+import { AudioRecorder } from '../components/audio-recorder';
+
+export function AudioRecorderCloud() {
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+
+  const simulateCloudUpload = async (uri: string): Promise<string> => {
+    return new Promise((resolve) => {
+      setUploading(true);
+      setUploadProgress(0);
+
+      const interval = setInterval(() => {
+        setUploadProgress((prev) => {
+          if (prev >= 100) {
+            clearInterval(interval);
+            setUploading(false);
+            resolve(
+              `https://cloud-storage.example.com/audio/${Date.now()}.m4a`,
+            );
+            return 100;
+          }
+          return prev + 10;
+        });
+      }, 200);
+    });
+  };
+
+  const handleRecordingComplete = async (uri: string) => {
+    try {
+      const cloudUrl = await simulateCloudUpload(uri);
+
+      console.log(`Recording uploaded to cloud storage!\n\nURL: ${cloudUrl}`);
+
+      setUploadProgress(0);
+    } catch (error) {
+      console.log('Failed to upload recording to cloud storage:', error);
+
+      setUploading(false);
+      setUploadProgress(0);
+    }
+  };
+
+  return (
+    <View style={{ width: '100%' }}>
+      <AudioRecorder
+        quality="high"
+        showWaveform={true}
+        showTimer={true}
+        maxDuration={600} // 10 minutes
+        onRecordingComplete={handleRecordingComplete}
+      />
+
+      {uploading && (
+        <View style={{ marginTop: 16, alignItems: 'center' }}>
+          <ActivityIndicator size="small" />
+          <Text className="text-sm" style={{ marginTop: 8 }}>
+            Uploading... {uploadProgress}%
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,102 @@
+import { RecordingPresets } from 'expo-audio';
+import React, { useState } from 'react';
+import { Alert, StyleSheet, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+
+import { AudioRecorder } from '../components/audio-recorder';
+
+export function AudioRecorderInterview() {
+  const [interviewTitle, setInterviewTitle] = useState('');
+  const [isRecording, setIsRecording] = useState(false);
+
+  const handleRecordingStart = () => {
+    setIsRecording(true);
+    const title = `Interview ${new Date().toLocaleDateString()}`;
+    setInterviewTitle(title);
+  };
+
+  const handleRecordingStop = () => {
+    setIsRecording(false);
+  };
+
+  const handleRecordingComplete = (uri: string) => {
+    Alert.alert(
+      '🎤 Interview Complete',
+      `"${interviewTitle}" has been recorded and saved.\n\nDuration: Available in file metadata\nQuality: High (48kHz, Stereo)`,
+      [{ text: 'Save & Exit' }],
+    );
+  };
+
+  return (
+    <View style={{ width: '100%' }}>
+      <View style={styles.interviewHeader}>
+        <Text
+          className="mt-4 text-xl font-medium"
+          style={styles.interviewTitle}
+        >
+          {interviewTitle || 'Ready for Interview'}
+        </Text>
+
+        <View
+          style={[styles.statusBadge, isRecording && styles.recordingBadge]}
+        >
+          <Text
+            style={[styles.statusText, isRecording && styles.recordingText]}
+          >
+            {isRecording ? '🔴 LIVE' : '⏸️ READY'}
+          </Text>
+        </View>
+      </View>
+
+      <AudioRecorder
+        quality="high"
+        showWaveform={true}
+        showTimer={true}
+        maxDuration={7200} // 2 hours for long interviews
+        customRecordingOptions={{
+          ...RecordingPresets.HIGH_QUALITY,
+          sampleRate: 48000,
+          bitRate: 128000,
+          numberOfChannels: 2,
+          isMeteringEnabled: true,
+        }}
+        onRecordingStart={handleRecordingStart}
+        onRecordingStop={handleRecordingStop}
+        onRecordingComplete={handleRecordingComplete}
+      />
+
+      <Text className="text-sm" style={{ marginTop: 12, textAlign: 'center' }}>
+        Maximum duration: 2 hours • High quality stereo recording
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  interviewHeader: {
+    marginBottom: 16,
+    alignItems: 'center',
+  },
+  interviewTitle: {
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  statusBadge: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    backgroundColor: '#f3f4f6',
+  },
+  recordingBadge: {
+    backgroundColor: '#fef2f2',
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#6b7280',
+  },
+  recordingText: {
+    color: '#dc2626',
+  },
+});

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

@@ -0,0 +1,27 @@
+import { AudioRecorder } from '../components/audio-recorder';
+
+export function AudioRecorderDemo() {
+  const handleRecordingComplete = (uri: string) => {
+    console.log('Recording saved to:', uri);
+  };
+
+  const handleRecordingStart = () => {
+    console.log('Recording started');
+  };
+
+  const handleRecordingStop = () => {
+    console.log('Recording stopped');
+  };
+
+  return (
+    <AudioRecorder
+      quality="high"
+      showWaveform={true}
+      showTimer={true}
+      maxDuration={300} // 5 minutes
+      onRecordingComplete={handleRecordingComplete}
+      onRecordingStart={handleRecordingStart}
+      onRecordingStop={handleRecordingStop}
+    />
+  );
+}

package/2/apps/native/src/features/audio-recorder/demo/index.ts

@@ -0,0 +1,5 @@
+export * from './audio-player-demo';
+export * from './audio-recorder-cloud';
+export * from './audio-recorder-interview';
+export * from './basic';
+export * from './with-recording-list-demo';