feat(mobile): replace starter template with dashboard-driven app flow
This commit is contained in:
@@ -1,67 +1,673 @@
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { useFocusEffect } from '@react-navigation/native';
|
||||
import { CameraView, useCameraPermissions } from 'expo-camera';
|
||||
import { useKeepAwake } from 'expo-keep-awake';
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Image,
|
||||
Modal,
|
||||
Pressable,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
import { ThemedText } from '@/components/themed-text';
|
||||
import { ThemedView } from '@/components/themed-view';
|
||||
import { IconSymbol } from '@/components/ui/icon-symbol';
|
||||
import { Colors } from '@/constants/theme';
|
||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
||||
|
||||
export default function HomeScreen() {
|
||||
const colorScheme = useColorScheme();
|
||||
const theme = colorScheme ?? 'light';
|
||||
import { useApp } from '@/src/app-context';
|
||||
|
||||
function PromptModal({
|
||||
visible,
|
||||
title,
|
||||
placeholder,
|
||||
value,
|
||||
onChange,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
}: {
|
||||
visible: boolean;
|
||||
title: string;
|
||||
placeholder: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
onCancel: () => void;
|
||||
onConfirm: () => void;
|
||||
}) {
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<ThemedView style={styles.header}>
|
||||
<ThemedText type="title">Your Cameras</ThemedText>
|
||||
<ThemedText type="secondary">Manage your indoor security devices</ThemedText>
|
||||
</ThemedView>
|
||||
|
||||
<ThemedView
|
||||
style={[styles.card, {
|
||||
shadowColor: Colors[theme].border,
|
||||
borderColor: Colors[theme].border
|
||||
}]}
|
||||
variant="card"
|
||||
>
|
||||
<IconSymbol size={48} name="house.fill" color={Colors[theme].icon} />
|
||||
<ThemedText type="subtitle" style={styles.cardTitle}>No Cameras Added</ThemedText>
|
||||
<ThemedText style={styles.cardDescription} type="secondary">
|
||||
Add a camera to start monitoring your home.
|
||||
</ThemedText>
|
||||
</ThemedView>
|
||||
</ThemedView>
|
||||
<Modal visible={visible} transparent animationType="fade" onRequestClose={onCancel}>
|
||||
<View style={styles.modalBackdrop}>
|
||||
<View style={styles.modalCard}>
|
||||
<Text style={styles.modalTitle}>{title}</Text>
|
||||
<TextInput
|
||||
style={styles.modalInput}
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor="#6b7280"
|
||||
value={value}
|
||||
onChangeText={onChange}
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
<View style={styles.modalActions}>
|
||||
<Pressable style={[styles.modalButton, styles.modalCancel]} onPress={onCancel}>
|
||||
<Text style={styles.modalCancelText}>Cancel</Text>
|
||||
</Pressable>
|
||||
<Pressable style={[styles.modalButton, styles.modalConfirm]} onPress={onConfirm}>
|
||||
<Text style={styles.modalConfirmText}>Save</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function CameraDashboard() {
|
||||
const { state, actions } = useApp();
|
||||
const cameraViewRef = useRef<CameraView | null>(null);
|
||||
const [permission, requestPermission] = useCameraPermissions();
|
||||
|
||||
// Prevent auto-lock while the camera dashboard is open in the foreground.
|
||||
useKeepAwake('securecam-camera-dashboard');
|
||||
|
||||
useEffect(() => {
|
||||
actions.setCameraPermissionGranted(Boolean(permission?.granted));
|
||||
}, [actions, permission?.granted]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
actions.setCameraRef(null);
|
||||
actions.setCameraPreviewReady(false);
|
||||
};
|
||||
}, [actions]);
|
||||
|
||||
return (
|
||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Camera Preview</Text>
|
||||
{!permission?.granted ? (
|
||||
<View style={styles.permissionBox}>
|
||||
<Text style={styles.permissionText}>Camera permission is required to publish live frames.</Text>
|
||||
<Pressable style={styles.primaryButton} onPress={() => void requestPermission()}>
|
||||
<Text style={styles.primaryButtonText}>Grant Camera Permission</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.previewBox}>
|
||||
<CameraView
|
||||
ref={(ref) => {
|
||||
cameraViewRef.current = ref;
|
||||
actions.setCameraRef(ref);
|
||||
}}
|
||||
style={styles.previewCamera}
|
||||
facing="back"
|
||||
onCameraReady={() => actions.setCameraPreviewReady(true)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Camera Status</Text>
|
||||
<View style={styles.rowBetween}>
|
||||
<Text style={styles.label}>Realtime</Text>
|
||||
<Text style={[styles.status, state.socketConnected ? styles.online : styles.offline]}>
|
||||
{state.socketConnected ? 'ONLINE' : 'OFFLINE'}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.rowBetween}>
|
||||
<Text style={styles.label}>Motion</Text>
|
||||
<Text style={[styles.status, state.isMotionActive ? styles.online : styles.offline]}>
|
||||
{state.isMotionActive ? 'ACTIVE' : 'IDLE'}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.rowBetween}>
|
||||
<Text style={styles.label}>Preview</Text>
|
||||
<Text style={[styles.status, state.cameraPreviewReady ? styles.online : styles.offline]}>
|
||||
{state.cameraPreviewReady ? 'READY' : 'NOT READY'}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.rowBetween}>
|
||||
<Text style={styles.label}>Publishing</Text>
|
||||
<Text style={[styles.status, state.cameraStatus === 'recording' ? styles.online : styles.offline]}>
|
||||
{state.cameraStatus === 'recording' ? 'ACTIVE' : 'IDLE'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Actions</Text>
|
||||
{!state.isMotionActive ? (
|
||||
<Pressable style={styles.primaryButton} onPress={() => void actions.startMotion()}>
|
||||
<Text style={styles.primaryButtonText}>Simulate Motion Event</Text>
|
||||
</Pressable>
|
||||
) : (
|
||||
<Pressable style={styles.secondaryButton} onPress={() => void actions.endMotion()}>
|
||||
<Text style={styles.secondaryButtonText}>Stop Motion Event</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
|
||||
<Pressable style={styles.secondaryButton} onPress={() => void actions.goOnline()}>
|
||||
<Text style={styles.secondaryButtonText}>Reconnect Realtime</Text>
|
||||
</Pressable>
|
||||
|
||||
<Text style={styles.infoText}>
|
||||
This mobile build remains on the legacy frame-relay path. Add a native WebRTC stack before enabling
|
||||
SIMPLE_STREAMING by default.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Logs</Text>
|
||||
{state.activityLog.length === 0 ? (
|
||||
<Text style={styles.emptyText}>Awaiting events...</Text>
|
||||
) : (
|
||||
state.activityLog.map((item) => (
|
||||
<Text key={item.id} style={styles.logLine}>
|
||||
[{new Date(item.createdAt).toLocaleTimeString()}] {item.type}: {item.message}
|
||||
</Text>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
function ClientDashboard() {
|
||||
const { state, actions } = useApp();
|
||||
const [linkModalOpen, setLinkModalOpen] = useState(false);
|
||||
const [cameraIdInput, setCameraIdInput] = useState('');
|
||||
const [renameTargetId, setRenameTargetId] = useState<string | null>(null);
|
||||
const [renameInput, setRenameInput] = useState('');
|
||||
|
||||
const activeCameraLabel = useMemo(() => {
|
||||
const linked = state.linkedCameras.find((camera) => camera.cameraDeviceId === state.activeCameraDeviceId);
|
||||
return linked?.cameraName || linked?.cameraDeviceId || 'Live Feed Viewer';
|
||||
}, [state.activeCameraDeviceId, state.linkedCameras]);
|
||||
|
||||
const isCameraLive = (cameraDeviceId: string) => {
|
||||
const sessionId = state.cameraSessions?.[cameraDeviceId];
|
||||
if (!sessionId) return false;
|
||||
return state.connectedStreamSessionIds.includes(sessionId);
|
||||
};
|
||||
|
||||
const openRenameModal = (cameraDeviceId: string, currentName?: string | null) => {
|
||||
setRenameTargetId(cameraDeviceId);
|
||||
setRenameInput(currentName || '');
|
||||
};
|
||||
|
||||
const submitRename = async () => {
|
||||
if (!renameTargetId) return;
|
||||
await actions.renameLinkedCamera(renameTargetId, renameInput);
|
||||
setRenameTargetId(null);
|
||||
setRenameInput('');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||
<View style={styles.rowBetween}>
|
||||
<Text style={styles.screenTitle}>Client Dashboard</Text>
|
||||
<View style={styles.rowGap}>
|
||||
<Pressable style={styles.outlineButton} onPress={() => setLinkModalOpen(true)}>
|
||||
<Text style={styles.outlineButtonText}>Link Camera</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.iconButton} onPress={() => void actions.refreshClientData()}>
|
||||
<Text style={styles.iconButtonText}>R</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Your Cameras</Text>
|
||||
<ScrollView horizontal contentContainerStyle={styles.cameraRow} showsHorizontalScrollIndicator={false}>
|
||||
{state.linkedCameras.length === 0 ? (
|
||||
<View style={styles.emptyCameraCard}>
|
||||
<Text style={styles.emptyText}>No cameras linked yet</Text>
|
||||
</View>
|
||||
) : (
|
||||
state.linkedCameras.map((link) => {
|
||||
const selected = state.activeCameraDeviceId === link.cameraDeviceId;
|
||||
const live = isCameraLive(link.cameraDeviceId);
|
||||
return (
|
||||
<View
|
||||
key={link.id}
|
||||
style={[styles.cameraCard, selected ? styles.cameraCardSelected : null]}>
|
||||
<Text style={styles.cameraName}>{link.cameraName || link.cameraDeviceId}</Text>
|
||||
<Text style={[styles.cameraStatus, link.cameraStatus === 'online' ? styles.online : styles.offline]}>
|
||||
{(link.cameraStatus || 'offline').toUpperCase()}
|
||||
</Text>
|
||||
<Text style={styles.cameraSubtext}>{live ? 'Live stream active' : 'Tap view to request stream'}</Text>
|
||||
|
||||
<View style={styles.cameraActionsRow}>
|
||||
<Pressable style={styles.smallButton} onPress={() => void actions.selectCamera(link.cameraDeviceId)}>
|
||||
<Text style={styles.smallButtonText}>View</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={styles.smallButton}
|
||||
onPress={() => openRenameModal(link.cameraDeviceId, link.cameraName)}>
|
||||
<Text style={styles.smallButtonText}>Rename</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={[styles.smallButton, styles.smallDangerButton]}
|
||||
onPress={() => {
|
||||
Alert.alert(
|
||||
'Remove Camera',
|
||||
`Remove \"${link.cameraName || link.cameraDeviceId}\" from linked cameras?`,
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
void actions.deleteLinkedCamera(link.id);
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
}}>
|
||||
<Text style={[styles.smallButtonText, styles.smallDangerText]}>Delete</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{state.activeCameraDeviceId ? (
|
||||
<View style={styles.card}>
|
||||
<View style={styles.rowBetween}>
|
||||
<Text style={styles.cardTitle}>Live Feed: {activeCameraLabel}</Text>
|
||||
<Pressable style={styles.iconButton} onPress={actions.closeStreamViewer}>
|
||||
<Text style={styles.iconButtonText}>X</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<View style={styles.streamBox}>
|
||||
{state.clientStreamMode === 'image' && state.clientFallbackFrame ? (
|
||||
<Image source={{ uri: state.clientFallbackFrame }} style={styles.streamImage} resizeMode="contain" />
|
||||
) : (
|
||||
<Text style={styles.streamPlaceholder}>{state.clientPlaceholderText}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Recent Recordings</Text>
|
||||
{state.recordings.length === 0 ? (
|
||||
<Text style={styles.emptyText}>No recordings found</Text>
|
||||
) : (
|
||||
state.recordings.slice(0, 5).map((recording) => (
|
||||
<View key={recording.id} style={styles.recordingRow}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.recordingTitle}>{new Date(recording.createdAt).toLocaleString()}</Text>
|
||||
<Text style={styles.recordingMeta}>
|
||||
{recording.durationSeconds != null ? `${recording.durationSeconds}s` : 'Duration pending'} -{' '}
|
||||
{recording.status ?? 'unknown'}
|
||||
</Text>
|
||||
</View>
|
||||
<Pressable
|
||||
style={styles.smallButton}
|
||||
disabled={recording.status !== 'ready'}
|
||||
onPress={() => void actions.openRecording(recording.id)}>
|
||||
<Text style={styles.smallButtonText}>Open</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<PromptModal
|
||||
visible={linkModalOpen}
|
||||
title="Link Camera"
|
||||
placeholder="Camera Device ID"
|
||||
value={cameraIdInput}
|
||||
onChange={setCameraIdInput}
|
||||
onCancel={() => {
|
||||
setLinkModalOpen(false);
|
||||
setCameraIdInput('');
|
||||
}}
|
||||
onConfirm={() => {
|
||||
void actions.linkCamera(cameraIdInput);
|
||||
setLinkModalOpen(false);
|
||||
setCameraIdInput('');
|
||||
}}
|
||||
/>
|
||||
|
||||
<PromptModal
|
||||
visible={Boolean(renameTargetId)}
|
||||
title="Rename Camera"
|
||||
placeholder="Camera name"
|
||||
value={renameInput}
|
||||
onChange={setRenameInput}
|
||||
onCancel={() => {
|
||||
setRenameTargetId(null);
|
||||
setRenameInput('');
|
||||
}}
|
||||
onConfirm={() => {
|
||||
void submitRename();
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardScreen() {
|
||||
const { state, actions } = useApp();
|
||||
|
||||
useFocusEffect(
|
||||
React.useCallback(() => {
|
||||
actions.setPage(state.device?.role === 'camera' ? 'camera' : 'client');
|
||||
return undefined;
|
||||
}, [actions, state.device?.role]),
|
||||
);
|
||||
|
||||
return <SafeAreaView style={styles.safe}>{state.device?.role === 'camera' ? <CameraDashboard /> : <ClientDashboard />}</SafeAreaView>;
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
safe: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
paddingTop: 80,
|
||||
backgroundColor: '#0a0a0c',
|
||||
},
|
||||
header: {
|
||||
marginBottom: 32,
|
||||
scrollContent: {
|
||||
padding: 14,
|
||||
gap: 12,
|
||||
},
|
||||
screenTitle: {
|
||||
color: '#f9fafb',
|
||||
fontSize: 22,
|
||||
fontWeight: '700',
|
||||
},
|
||||
rowBetween: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
rowGap: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
alignItems: 'center',
|
||||
},
|
||||
card: {
|
||||
padding: 32,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 14,
|
||||
borderWidth: 1,
|
||||
// iOS Shadow
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 12,
|
||||
// Android Shadow
|
||||
elevation: 2,
|
||||
borderColor: 'rgba(255,255,255,0.08)',
|
||||
backgroundColor: '#111218',
|
||||
gap: 10,
|
||||
},
|
||||
cardTitle: {
|
||||
marginTop: 16,
|
||||
marginBottom: 8,
|
||||
color: '#f9fafb',
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
},
|
||||
cardDescription: {
|
||||
textAlign: 'center',
|
||||
maxWidth: 240,
|
||||
previewBox: {
|
||||
height: 220,
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
backgroundColor: '#08090d',
|
||||
},
|
||||
previewCamera: {
|
||||
flex: 1,
|
||||
},
|
||||
permissionBox: {
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
backgroundColor: '#08090d',
|
||||
padding: 12,
|
||||
gap: 10,
|
||||
},
|
||||
permissionText: {
|
||||
color: '#9ca3af',
|
||||
fontSize: 12,
|
||||
lineHeight: 18,
|
||||
},
|
||||
label: {
|
||||
color: '#9ca3af',
|
||||
fontSize: 12,
|
||||
},
|
||||
status: {
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
},
|
||||
online: {
|
||||
color: '#34d399',
|
||||
},
|
||||
offline: {
|
||||
color: '#f87171',
|
||||
},
|
||||
primaryButton: {
|
||||
height: 44,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#2563eb',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
primaryButtonText: {
|
||||
color: '#f9fafb',
|
||||
fontWeight: '700',
|
||||
fontSize: 14,
|
||||
},
|
||||
secondaryButton: {
|
||||
height: 44,
|
||||
borderRadius: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.12)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
secondaryButtonText: {
|
||||
color: '#d1d5db',
|
||||
fontWeight: '600',
|
||||
fontSize: 13,
|
||||
},
|
||||
outlineButton: {
|
||||
height: 36,
|
||||
borderRadius: 9,
|
||||
paddingHorizontal: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.18)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
outlineButtonText: {
|
||||
color: '#d1d5db',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
iconButton: {
|
||||
height: 36,
|
||||
width: 36,
|
||||
borderRadius: 9,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.18)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
iconButtonText: {
|
||||
color: '#d1d5db',
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
},
|
||||
infoText: {
|
||||
color: '#9ca3af',
|
||||
fontSize: 12,
|
||||
lineHeight: 18,
|
||||
},
|
||||
emptyText: {
|
||||
color: '#6b7280',
|
||||
fontSize: 12,
|
||||
},
|
||||
logLine: {
|
||||
color: '#9ca3af',
|
||||
fontSize: 12,
|
||||
lineHeight: 18,
|
||||
},
|
||||
cameraRow: {
|
||||
gap: 10,
|
||||
},
|
||||
emptyCameraCard: {
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderStyle: 'dashed',
|
||||
borderColor: 'rgba(255,255,255,0.2)',
|
||||
padding: 16,
|
||||
minWidth: 240,
|
||||
},
|
||||
cameraCard: {
|
||||
minWidth: 260,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.08)',
|
||||
padding: 12,
|
||||
backgroundColor: '#0d0f15',
|
||||
gap: 6,
|
||||
},
|
||||
cameraCardSelected: {
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: '#111b2f',
|
||||
},
|
||||
cameraName: {
|
||||
color: '#f3f4f6',
|
||||
fontWeight: '600',
|
||||
fontSize: 13,
|
||||
},
|
||||
cameraStatus: {
|
||||
fontSize: 11,
|
||||
fontWeight: '700',
|
||||
},
|
||||
cameraSubtext: {
|
||||
color: '#9ca3af',
|
||||
fontSize: 11,
|
||||
marginBottom: 4,
|
||||
},
|
||||
cameraActionsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 6,
|
||||
},
|
||||
smallButton: {
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.16)',
|
||||
paddingHorizontal: 10,
|
||||
height: 30,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
smallButtonText: {
|
||||
color: '#d1d5db',
|
||||
fontSize: 11,
|
||||
fontWeight: '600',
|
||||
},
|
||||
smallDangerButton: {
|
||||
borderColor: 'rgba(248,113,113,0.4)',
|
||||
},
|
||||
smallDangerText: {
|
||||
color: '#fca5a5',
|
||||
},
|
||||
streamBox: {
|
||||
height: 220,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
backgroundColor: '#08090d',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
streamImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
streamPlaceholder: {
|
||||
color: '#6b7280',
|
||||
fontWeight: '600',
|
||||
},
|
||||
recordingRow: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.08)',
|
||||
backgroundColor: '#0d0f15',
|
||||
padding: 10,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
recordingTitle: {
|
||||
color: '#e5e7eb',
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
},
|
||||
recordingMeta: {
|
||||
color: '#6b7280',
|
||||
fontSize: 11,
|
||||
marginTop: 2,
|
||||
},
|
||||
modalBackdrop: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 16,
|
||||
},
|
||||
modalCard: {
|
||||
width: '100%',
|
||||
maxWidth: 360,
|
||||
borderRadius: 14,
|
||||
padding: 14,
|
||||
backgroundColor: '#111218',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
gap: 10,
|
||||
},
|
||||
modalTitle: {
|
||||
color: '#f3f4f6',
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
},
|
||||
modalInput: {
|
||||
height: 46,
|
||||
borderRadius: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.14)',
|
||||
backgroundColor: '#0a0a0e',
|
||||
color: '#f3f4f6',
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
modalActions: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
gap: 8,
|
||||
},
|
||||
modalButton: {
|
||||
height: 36,
|
||||
borderRadius: 8,
|
||||
minWidth: 76,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
modalCancel: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.16)',
|
||||
},
|
||||
modalConfirm: {
|
||||
backgroundColor: '#2563eb',
|
||||
},
|
||||
modalCancelText: {
|
||||
color: '#d1d5db',
|
||||
fontWeight: '600',
|
||||
},
|
||||
modalConfirmText: {
|
||||
color: '#f9fafb',
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user