first release 0.0.0.2
This commit is contained in:
@@ -0,0 +1,262 @@
|
||||
/**
|
||||
* CameraUpload - Kamera-Foto oder Galerie-Auswahl
|
||||
*
|
||||
* Ermoeglicht das Aufnehmen eines Fotos mit der Geraetekamera
|
||||
* oder die Auswahl aus der Galerie, mit Vorschau vor dem Senden.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
Image,
|
||||
StyleSheet,
|
||||
ActivityIndicator,
|
||||
Platform,
|
||||
PermissionsAndroid,
|
||||
} from 'react-native';
|
||||
import { launchCamera, launchImageLibrary, ImagePickerResponse } from 'react-native-image-picker';
|
||||
|
||||
// --- Typen ---
|
||||
|
||||
export interface PhotoData {
|
||||
base64: string;
|
||||
width: number;
|
||||
height: number;
|
||||
fileName: string;
|
||||
type: string;
|
||||
uri: string;
|
||||
}
|
||||
|
||||
interface CameraUploadProps {
|
||||
onPhotoSelected: (photo: PhotoData) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
// Komprimierungsoptionen
|
||||
const IMAGE_OPTIONS = {
|
||||
mediaType: 'photo' as const,
|
||||
maxWidth: 1920,
|
||||
maxHeight: 1920,
|
||||
quality: 0.8 as const,
|
||||
includeBase64: true,
|
||||
};
|
||||
|
||||
// --- Komponente ---
|
||||
|
||||
const CameraUpload: React.FC<CameraUploadProps> = ({ onPhotoSelected, onCancel }) => {
|
||||
const [preview, setPreview] = useState<ImagePickerResponse | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
/** Kamera-Berechtigung pruefen (Android) */
|
||||
const requestCameraPermission = async (): Promise<boolean> => {
|
||||
if (Platform.OS !== 'android') return true;
|
||||
|
||||
try {
|
||||
const granted = await PermissionsAndroid.request(
|
||||
PermissionsAndroid.PERMISSIONS.CAMERA,
|
||||
{
|
||||
title: 'ARIA Cockpit - Kamera',
|
||||
message: 'ARIA ben\u00F6tigt Zugriff auf die Kamera.',
|
||||
buttonPositive: 'Erlauben',
|
||||
buttonNegative: 'Ablehnen',
|
||||
},
|
||||
);
|
||||
return granted === PermissionsAndroid.RESULTS.GRANTED;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/** Foto mit Kamera aufnehmen */
|
||||
const takePhoto = async () => {
|
||||
const hasPermission = await requestCameraPermission();
|
||||
if (!hasPermission) return;
|
||||
|
||||
launchCamera(IMAGE_OPTIONS, (response) => {
|
||||
if (response.didCancel) {
|
||||
// Benutzer hat abgebrochen
|
||||
return;
|
||||
}
|
||||
if (response.errorCode) {
|
||||
console.error('[CameraUpload] Kamera-Fehler:', response.errorMessage);
|
||||
return;
|
||||
}
|
||||
setPreview(response);
|
||||
});
|
||||
};
|
||||
|
||||
/** Foto aus Galerie auswaehlen */
|
||||
const pickFromGallery = async () => {
|
||||
launchImageLibrary(IMAGE_OPTIONS, (response) => {
|
||||
if (response.didCancel) return;
|
||||
if (response.errorCode) {
|
||||
console.error('[CameraUpload] Galerie-Fehler:', response.errorMessage);
|
||||
return;
|
||||
}
|
||||
setPreview(response);
|
||||
});
|
||||
};
|
||||
|
||||
/** Ausgewaehltes Foto senden */
|
||||
const sendPhoto = () => {
|
||||
const asset = preview?.assets?.[0];
|
||||
if (!asset) return;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
const photoData: PhotoData = {
|
||||
base64: asset.base64 || '',
|
||||
width: asset.width || 0,
|
||||
height: asset.height || 0,
|
||||
fileName: asset.fileName || `foto_${Date.now()}.jpg`,
|
||||
type: asset.type || 'image/jpeg',
|
||||
uri: asset.uri || '',
|
||||
};
|
||||
|
||||
onPhotoSelected(photoData);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const previewUri = preview?.assets?.[0]?.uri;
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{!preview ? (
|
||||
// Auswahl: Kamera oder Galerie
|
||||
<View style={styles.optionsContainer}>
|
||||
<TouchableOpacity
|
||||
style={styles.optionButton}
|
||||
onPress={takePhoto}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.optionIcon}>{'\uD83D\uDCF7'}</Text>
|
||||
<Text style={styles.optionText}>Foto aufnehmen</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.optionButton}
|
||||
onPress={pickFromGallery}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.optionIcon}>{'\uD83D\uDDBC\uFE0F'}</Text>
|
||||
<Text style={styles.optionText}>Aus Galerie</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity style={styles.cancelLink} onPress={onCancel}>
|
||||
<Text style={styles.cancelLinkText}>Abbrechen</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : (
|
||||
// Vorschau
|
||||
<View style={styles.previewContainer}>
|
||||
{previewUri && (
|
||||
<Image source={{ uri: previewUri }} style={styles.imagePreview} />
|
||||
)}
|
||||
|
||||
<View style={styles.buttonRow}>
|
||||
<TouchableOpacity
|
||||
style={styles.retakeButton}
|
||||
onPress={() => setPreview(null)}
|
||||
>
|
||||
<Text style={styles.retakeText}>Neu</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.sendButton}
|
||||
onPress={sendPhoto}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#FFFFFF" size="small" />
|
||||
) : (
|
||||
<Text style={styles.sendText}>Senden</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Styles ---
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: '#1A1A2E',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
margin: 12,
|
||||
},
|
||||
optionsContainer: {
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
},
|
||||
optionButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#2A2A3E',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
width: '100%',
|
||||
},
|
||||
optionIcon: {
|
||||
fontSize: 28,
|
||||
marginRight: 14,
|
||||
},
|
||||
optionText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
cancelLink: {
|
||||
marginTop: 8,
|
||||
padding: 8,
|
||||
},
|
||||
cancelLinkText: {
|
||||
color: '#666680',
|
||||
fontSize: 14,
|
||||
},
|
||||
previewContainer: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
imagePreview: {
|
||||
width: '100%',
|
||||
height: 280,
|
||||
borderRadius: 12,
|
||||
resizeMode: 'contain',
|
||||
marginBottom: 16,
|
||||
},
|
||||
buttonRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
retakeButton: {
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#2A2A3E',
|
||||
},
|
||||
retakeText: {
|
||||
color: '#8888AA',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
},
|
||||
sendButton: {
|
||||
paddingHorizontal: 32,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#0096FF',
|
||||
minWidth: 100,
|
||||
alignItems: 'center',
|
||||
},
|
||||
sendText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
|
||||
export default CameraUpload;
|
||||
@@ -0,0 +1,258 @@
|
||||
/**
|
||||
* FileUpload - Datei-Auswahl und -Versand
|
||||
*
|
||||
* Oeffnet den Dateimanager des Geraets, zeigt eine Vorschau
|
||||
* und konvertiert die Datei zu Base64 fuer die Uebertragung.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
Image,
|
||||
StyleSheet,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import DocumentPicker, {
|
||||
DocumentPickerResponse,
|
||||
} from 'react-native-document-picker';
|
||||
|
||||
// --- Typen ---
|
||||
|
||||
export interface FileData {
|
||||
name: string;
|
||||
type: string;
|
||||
size: number;
|
||||
base64: string;
|
||||
uri: string;
|
||||
}
|
||||
|
||||
interface FileUploadProps {
|
||||
onFileSelected: (file: FileData) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
// Unterstuetzte Dateitypen
|
||||
const SUPPORTED_TYPES = [
|
||||
DocumentPicker.types.images,
|
||||
DocumentPicker.types.pdf,
|
||||
DocumentPicker.types.docx,
|
||||
DocumentPicker.types.plainText,
|
||||
];
|
||||
|
||||
// --- Komponente ---
|
||||
|
||||
const FileUpload: React.FC<FileUploadProps> = ({ onFileSelected, onCancel }) => {
|
||||
const [selectedFile, setSelectedFile] = useState<DocumentPickerResponse | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const pickFile = async () => {
|
||||
setError(null);
|
||||
try {
|
||||
const result = await DocumentPicker.pick({
|
||||
type: SUPPORTED_TYPES,
|
||||
copyTo: 'cachesDirectory',
|
||||
});
|
||||
|
||||
if (result.length > 0) {
|
||||
setSelectedFile(result[0]);
|
||||
}
|
||||
} catch (err) {
|
||||
if (DocumentPicker.isCancel(err)) {
|
||||
onCancel();
|
||||
} else {
|
||||
setError('Fehler beim Auswaehlen der Datei');
|
||||
console.error('[FileUpload] Fehler:', err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const sendFile = async () => {
|
||||
if (!selectedFile) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
// In Produktion: Datei lesen und zu Base64 konvertieren
|
||||
// const base64 = await RNFS.readFile(selectedFile.fileCopyUri || selectedFile.uri, 'base64');
|
||||
const base64Placeholder = '';
|
||||
|
||||
const fileData: FileData = {
|
||||
name: selectedFile.name || 'unbenannt',
|
||||
type: selectedFile.type || 'application/octet-stream',
|
||||
size: selectedFile.size || 0,
|
||||
base64: base64Placeholder,
|
||||
uri: selectedFile.uri,
|
||||
};
|
||||
|
||||
onFileSelected(fileData);
|
||||
} catch (err) {
|
||||
setError('Fehler beim Verarbeiten der Datei');
|
||||
console.error('[FileUpload] Verarbeitungsfehler:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const isImage = selectedFile?.type?.startsWith('image/');
|
||||
const fileSizeFormatted = selectedFile?.size
|
||||
? selectedFile.size > 1024 * 1024
|
||||
? `${(selectedFile.size / (1024 * 1024)).toFixed(1)} MB`
|
||||
: `${(selectedFile.size / 1024).toFixed(0)} KB`
|
||||
: '';
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{!selectedFile ? (
|
||||
// Datei auswaehlen
|
||||
<TouchableOpacity style={styles.pickButton} onPress={pickFile} activeOpacity={0.7}>
|
||||
<Text style={styles.pickIcon}>{'\uD83D\uDCC1'}</Text>
|
||||
<Text style={styles.pickText}>Datei ausw\u00E4hlen</Text>
|
||||
<Text style={styles.pickHint}>JPG, PNG, PDF, DOCX, TXT</Text>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
// Vorschau und Senden
|
||||
<View style={styles.previewContainer}>
|
||||
{isImage ? (
|
||||
<Image source={{ uri: selectedFile.uri }} style={styles.imagePreview} />
|
||||
) : (
|
||||
<View style={styles.filePreview}>
|
||||
<Text style={styles.fileIcon}>{'\uD83D\uDCC4'}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<Text style={styles.fileName} numberOfLines={1}>
|
||||
{selectedFile.name}
|
||||
</Text>
|
||||
<Text style={styles.fileSize}>{fileSizeFormatted}</Text>
|
||||
|
||||
{error && <Text style={styles.errorText}>{error}</Text>}
|
||||
|
||||
<View style={styles.buttonRow}>
|
||||
<TouchableOpacity
|
||||
style={styles.cancelButton}
|
||||
onPress={() => setSelectedFile(null)}
|
||||
>
|
||||
<Text style={styles.cancelButtonText}>Andere Datei</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.sendButton}
|
||||
onPress={sendFile}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#FFFFFF" size="small" />
|
||||
) : (
|
||||
<Text style={styles.sendButtonText}>Senden</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Styles ---
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: '#1A1A2E',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
margin: 12,
|
||||
},
|
||||
pickButton: {
|
||||
alignItems: 'center',
|
||||
padding: 30,
|
||||
borderWidth: 2,
|
||||
borderColor: '#2A2A3E',
|
||||
borderStyle: 'dashed',
|
||||
borderRadius: 12,
|
||||
},
|
||||
pickIcon: {
|
||||
fontSize: 40,
|
||||
marginBottom: 10,
|
||||
},
|
||||
pickText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
pickHint: {
|
||||
color: '#666680',
|
||||
fontSize: 12,
|
||||
marginTop: 4,
|
||||
},
|
||||
previewContainer: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
imagePreview: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
borderRadius: 12,
|
||||
marginBottom: 12,
|
||||
resizeMode: 'cover',
|
||||
},
|
||||
filePreview: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#2A2A3E',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
fileIcon: {
|
||||
fontSize: 36,
|
||||
},
|
||||
fileName: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
maxWidth: 250,
|
||||
},
|
||||
fileSize: {
|
||||
color: '#666680',
|
||||
fontSize: 12,
|
||||
marginTop: 2,
|
||||
},
|
||||
errorText: {
|
||||
color: '#FF3B30',
|
||||
fontSize: 12,
|
||||
marginTop: 8,
|
||||
},
|
||||
buttonRow: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 16,
|
||||
gap: 12,
|
||||
},
|
||||
cancelButton: {
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#2A2A3E',
|
||||
},
|
||||
cancelButtonText: {
|
||||
color: '#8888AA',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
},
|
||||
sendButton: {
|
||||
paddingHorizontal: 28,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#0096FF',
|
||||
minWidth: 90,
|
||||
alignItems: 'center',
|
||||
},
|
||||
sendButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
|
||||
export default FileUpload;
|
||||
@@ -0,0 +1,245 @@
|
||||
/**
|
||||
* ModeSelector - Modus-Auswahl fuer ARIA
|
||||
*
|
||||
* Zeigt den aktuellen Betriebsmodus an und ermoeglicht das Umschalten
|
||||
* ueber ein Modal-Dropdown.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
Modal,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
} from 'react-native';
|
||||
import rvs from '../services/rvs';
|
||||
|
||||
// --- Typen ---
|
||||
|
||||
export interface Mode {
|
||||
id: string;
|
||||
label: string;
|
||||
emoji: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface ModeSelectorProps {
|
||||
currentModeId: string;
|
||||
onModeChange: (modeId: string) => void;
|
||||
}
|
||||
|
||||
// --- Verfuegbare Modi ---
|
||||
|
||||
export const MODES: Mode[] = [
|
||||
{
|
||||
id: 'normal',
|
||||
label: 'Normal',
|
||||
emoji: '\uD83D\uDFE2',
|
||||
description: 'Standardmodus - ARIA reagiert auf alle Eingaben',
|
||||
},
|
||||
{
|
||||
id: 'nicht_stoeren',
|
||||
label: 'Nicht st\u00F6ren',
|
||||
emoji: '\uD83D\uDD34',
|
||||
description: 'Nur kritische Benachrichtigungen',
|
||||
},
|
||||
{
|
||||
id: 'fluester',
|
||||
label: 'Fl\u00FCster',
|
||||
emoji: '\uD83D\uDFE1',
|
||||
description: 'Leise Antworten, reduzierte Aktivit\u00E4t',
|
||||
},
|
||||
{
|
||||
id: 'hangar',
|
||||
label: 'Hangar',
|
||||
emoji: '\u2708\uFE0F',
|
||||
description: 'Flugmodus - minimale Kommunikation',
|
||||
},
|
||||
{
|
||||
id: 'gaming',
|
||||
label: 'Gaming',
|
||||
emoji: '\uD83C\uDFAE',
|
||||
description: 'Spielmodus - nur dringende Meldungen',
|
||||
},
|
||||
];
|
||||
|
||||
// --- Komponente ---
|
||||
|
||||
const ModeSelector: React.FC<ModeSelectorProps> = ({ currentModeId, onModeChange }) => {
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
|
||||
const currentMode = MODES.find(m => m.id === currentModeId) || MODES[0];
|
||||
|
||||
const handleSelectMode = (mode: Mode) => {
|
||||
setModalVisible(false);
|
||||
onModeChange(mode.id);
|
||||
|
||||
// Moduswechsel an ARIA senden
|
||||
rvs.send('mode', { mode: mode.id });
|
||||
};
|
||||
|
||||
const renderModeItem = ({ item }: { item: Mode }) => {
|
||||
const isActive = item.id === currentModeId;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.modeItem, isActive && styles.modeItemActive]}
|
||||
onPress={() => handleSelectMode(item)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.modeEmoji}>{item.emoji}</Text>
|
||||
<View style={styles.modeTextContainer}>
|
||||
<Text style={[styles.modeLabel, isActive && styles.modeLabelActive]}>
|
||||
{item.label}
|
||||
</Text>
|
||||
<Text style={styles.modeDescription}>{item.description}</Text>
|
||||
</View>
|
||||
{isActive && <Text style={styles.checkmark}>{'\u2713'}</Text>}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View>
|
||||
{/* Aktueller Modus - Tappen zum Oeffnen */}
|
||||
<TouchableOpacity
|
||||
style={styles.currentMode}
|
||||
onPress={() => setModalVisible(true)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.currentEmoji}>{currentMode.emoji}</Text>
|
||||
<Text style={styles.currentLabel}>{currentMode.label}</Text>
|
||||
<Text style={styles.chevron}>{'\u25BC'}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Modus-Auswahl Modal */}
|
||||
<Modal
|
||||
visible={modalVisible}
|
||||
transparent
|
||||
animationType="slide"
|
||||
onRequestClose={() => setModalVisible(false)}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.modalOverlay}
|
||||
activeOpacity={1}
|
||||
onPress={() => setModalVisible(false)}
|
||||
>
|
||||
<View style={styles.modalContent}>
|
||||
<Text style={styles.modalTitle}>Modus w\u00E4hlen</Text>
|
||||
<FlatList
|
||||
data={MODES}
|
||||
keyExtractor={item => item.id}
|
||||
renderItem={renderModeItem}
|
||||
scrollEnabled={false}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={styles.cancelButton}
|
||||
onPress={() => setModalVisible(false)}
|
||||
>
|
||||
<Text style={styles.cancelText}>Abbrechen</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Styles ---
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
currentMode: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#1E1E2E',
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: '#2A2A3E',
|
||||
},
|
||||
currentEmoji: {
|
||||
fontSize: 22,
|
||||
marginRight: 10,
|
||||
},
|
||||
currentLabel: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
flex: 1,
|
||||
},
|
||||
chevron: {
|
||||
color: '#8888AA',
|
||||
fontSize: 12,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.6)',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: '#1A1A2E',
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
padding: 20,
|
||||
paddingBottom: 40,
|
||||
},
|
||||
modalTitle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
textAlign: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
modeItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 14,
|
||||
borderRadius: 10,
|
||||
marginBottom: 6,
|
||||
},
|
||||
modeItemActive: {
|
||||
backgroundColor: 'rgba(0, 150, 255, 0.15)',
|
||||
},
|
||||
modeEmoji: {
|
||||
fontSize: 26,
|
||||
marginRight: 14,
|
||||
},
|
||||
modeTextContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
modeLabel: {
|
||||
color: '#CCCCDD',
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
modeLabelActive: {
|
||||
color: '#0096FF',
|
||||
fontWeight: '700',
|
||||
},
|
||||
modeDescription: {
|
||||
color: '#666680',
|
||||
fontSize: 12,
|
||||
marginTop: 2,
|
||||
},
|
||||
checkmark: {
|
||||
color: '#0096FF',
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
marginLeft: 8,
|
||||
},
|
||||
cancelButton: {
|
||||
marginTop: 12,
|
||||
padding: 14,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#2A2A3E',
|
||||
alignItems: 'center',
|
||||
},
|
||||
cancelText: {
|
||||
color: '#8888AA',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
|
||||
export default ModeSelector;
|
||||
@@ -0,0 +1,176 @@
|
||||
/**
|
||||
* VoiceButton - Push-to-Talk Aufnahmeknopf
|
||||
*
|
||||
* Grosser runder Button: gedrueckt halten zum Aufnehmen, loslassen zum Senden.
|
||||
* Visuelles Feedback durch pulsierende Animation waehrend der Aufnahme.
|
||||
*/
|
||||
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
Animated,
|
||||
StyleSheet,
|
||||
GestureResponderEvent,
|
||||
Easing,
|
||||
} from 'react-native';
|
||||
import audioService, { RecordingResult } from '../services/audio';
|
||||
|
||||
// --- Typen ---
|
||||
|
||||
interface VoiceButtonProps {
|
||||
/** Wird aufgerufen wenn die Aufnahme fertig ist */
|
||||
onRecordingComplete: (result: RecordingResult) => void;
|
||||
/** Button deaktivieren */
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
// --- Komponente ---
|
||||
|
||||
const VoiceButton: React.FC<VoiceButtonProps> = ({ onRecordingComplete, disabled = false }) => {
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
const [durationMs, setDurationMs] = useState(0);
|
||||
const pulseAnim = useRef(new Animated.Value(1)).current;
|
||||
const durationTimer = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
// Puls-Animation starten/stoppen
|
||||
useEffect(() => {
|
||||
if (isRecording) {
|
||||
const pulse = Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(pulseAnim, {
|
||||
toValue: 1.2,
|
||||
duration: 600,
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(pulseAnim, {
|
||||
toValue: 1,
|
||||
duration: 600,
|
||||
easing: Easing.inOut(Easing.ease),
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]),
|
||||
);
|
||||
pulse.start();
|
||||
return () => pulse.stop();
|
||||
} else {
|
||||
pulseAnim.setValue(1);
|
||||
}
|
||||
}, [isRecording, pulseAnim]);
|
||||
|
||||
// Aufnahmedauer zaehlen
|
||||
useEffect(() => {
|
||||
if (isRecording) {
|
||||
setDurationMs(0);
|
||||
durationTimer.current = setInterval(() => {
|
||||
setDurationMs(prev => prev + 100);
|
||||
}, 100);
|
||||
} else {
|
||||
if (durationTimer.current) {
|
||||
clearInterval(durationTimer.current);
|
||||
durationTimer.current = null;
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
if (durationTimer.current) {
|
||||
clearInterval(durationTimer.current);
|
||||
}
|
||||
};
|
||||
}, [isRecording]);
|
||||
|
||||
const handlePressIn = async (_event: GestureResponderEvent) => {
|
||||
if (disabled) return;
|
||||
const started = await audioService.startRecording();
|
||||
if (started) {
|
||||
setIsRecording(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePressOut = async (_event: GestureResponderEvent) => {
|
||||
if (!isRecording) return;
|
||||
setIsRecording(false);
|
||||
|
||||
const result = await audioService.stopRecording();
|
||||
if (result && result.durationMs > 300) {
|
||||
// Nur senden wenn laenger als 300ms (versehentliches Tippen vermeiden)
|
||||
onRecordingComplete(result);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDuration = (ms: number): string => {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const tenths = Math.floor((ms % 1000) / 100);
|
||||
return `${seconds}.${tenths}s`;
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.buttonOuter,
|
||||
isRecording && styles.buttonOuterRecording,
|
||||
{ transform: [{ scale: pulseAnim }] },
|
||||
]}
|
||||
onStartShouldSetResponder={() => true}
|
||||
onResponderGrant={handlePressIn}
|
||||
onResponderRelease={handlePressOut}
|
||||
onResponderTerminate={handlePressOut}
|
||||
>
|
||||
<View style={[styles.buttonInner, isRecording && styles.buttonInnerRecording]}>
|
||||
<Text style={styles.buttonIcon}>{isRecording ? '⏹' : '🎙'}</Text>
|
||||
</View>
|
||||
</Animated.View>
|
||||
{isRecording && (
|
||||
<Text style={styles.durationText}>{formatDuration(durationMs)}</Text>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Styles ---
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
buttonOuter: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 32,
|
||||
backgroundColor: 'rgba(0, 150, 255, 0.2)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
buttonOuterRecording: {
|
||||
backgroundColor: 'rgba(255, 59, 48, 0.3)',
|
||||
},
|
||||
buttonInner: {
|
||||
width: 52,
|
||||
height: 52,
|
||||
borderRadius: 26,
|
||||
backgroundColor: '#0096FF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
elevation: 4,
|
||||
shadowColor: '#0096FF',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 4,
|
||||
},
|
||||
buttonInnerRecording: {
|
||||
backgroundColor: '#FF3B30',
|
||||
},
|
||||
buttonIcon: {
|
||||
fontSize: 24,
|
||||
},
|
||||
durationText: {
|
||||
color: '#FF3B30',
|
||||
fontSize: 12,
|
||||
marginTop: 4,
|
||||
fontVariant: ['tabular-nums'],
|
||||
},
|
||||
});
|
||||
|
||||
export default VoiceButton;
|
||||
Reference in New Issue
Block a user