vibefast-cli 1.1.3 → 1.2.1

package/recipes/audio-recorder-supabase/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/recipes/audio-recorder-supabase/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/recipes/audio-recorder-supabase/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/recipes/audio-recorder-supabase/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/recipes/audio-recorder-supabase/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/recipes/audio-recorder-supabase/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';

package/recipes/audio-recorder-supabase/apps/native/src/features/audio-recorder/demo/with-recording-list-demo.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import { AudioRecorder, type Recording, RecordingList } from '../components';
+import { createSafeMMKV } from '@/core/storage/mmkv';
+
+const RECORDINGS_STORAGE_KEY = 'audio_recordings';
+const storage = createSafeMMKV();
+
+export function RecordingListDemo() {
+  const [recordings, setRecordings] = useState<Recording[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Load recordings from storage on component mount
+  useEffect(() => {
+    loadRecordings();
+  }, []);
+
+  const loadRecordings = () => {
+    try {
+      const storedRecordings = storage.getString(RECORDINGS_STORAGE_KEY);
+      if (storedRecordings) {
+        const parsedRecordings = JSON.parse(storedRecordings);
+        setRecordings(parsedRecordings);
+      }
+    } catch (error) {
+      console.error('Failed to load recordings:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const saveRecordings = (newRecordings: Recording[]) => {
+    try {
+      storage.set(RECORDINGS_STORAGE_KEY, JSON.stringify(newRecordings));
+    } catch (error) {
+      console.error('Failed to save recordings:', error);
+    }
+  };
+
+  const handleRecordingComplete = (uri: string) => {
+    const newRecording: Recording = {
+      uri,
+      name: `Recording ${recordings.length + 1}`,
+      date: new Date().toLocaleString(),
+    };
+    const updatedRecordings = [...recordings, newRecording];
+    setRecordings(updatedRecordings);
+    saveRecordings(updatedRecordings);
+  };
+
+  const handleDeleteRecording = (uri: string) => {
+    const updatedRecordings = recordings.filter((rec) => rec.uri !== uri);
+    setRecordings(updatedRecordings);
+    saveRecordings(updatedRecordings);
+  };
+
+  if (isLoading) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ flex: 1, width: '100%', gap: 16 }}>
+      <AudioRecorder onRecordingComplete={handleRecordingComplete} />
+      <RecordingList
+        recordings={recordings}
+        onDeleteRecording={handleDeleteRecording}
+      />
+    </View>
+  );
+}