vibefast-cli 0.6.2 → 0.7.1

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

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

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

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

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

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

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

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

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