kynjal-cli 2.0.6 → 3.1.0

package/dist/templates/components/ui/camera.tsx

@@ -1,1008 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
-import { Text } from '@/components/ui/text';
-import { useColor } from '@/hooks/useColor';
-import { BORDER_RADIUS, FONT_SIZE } from '@/theme/globals';
-import {
-  CameraMode,
-  CameraRatio,
-  CameraType,
-  CameraView,
-  useCameraPermissions,
-} from 'expo-camera';
-import {
-  Camera as CameraIcon,
-  Grid3X3,
-  Settings,
-  SwitchCamera,
-  Timer,
-  Video,
-  Volume2,
-  VolumeX,
-  X,
-  Zap,
-  ZapOff,
-} from 'lucide-react-native';
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import {
-  ActivityIndicator,
-  Alert,
-  Dimensions,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, {
-  interpolate,
-  runOnJS,
-  useAnimatedProps,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withDelay,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated';
-
-const { width: screenWidth } = Dimensions.get('window');
-
-const AnimatedCameraView = Animated.createAnimatedComponent(CameraView);
-
-export type CaptureSuccess = {
-  type: CameraMode;
-  uri: string;
-  cameraHeight: number;
-};
-export interface CameraProps {
-  style?: ViewStyle;
-  facing?: CameraType;
-  enableTorch?: boolean;
-  showControls?: boolean;
-  timerOptions?: Array<number>;
-  enableVideo?: boolean;
-  maxVideoDuration?: number; // in seconds
-  onClose?: () => void;
-  onCapture?: ({ type, uri, cameraHeight }: CaptureSuccess) => void;
-  onVideoCapture?: ({ type, uri, cameraHeight }: CaptureSuccess) => void;
-}
-
-export interface CameraRef {
-  switchCamera: () => void;
-  toggleTorch: () => void;
-  takePicture: () => Promise<void>;
-  startRecording: () => Promise<void>;
-  stopRecording: () => Promise<void>;
-}
-
-export const Camera = forwardRef<CameraRef, CameraProps>(
-  (
-    {
-      style,
-      onCapture,
-      onVideoCapture,
-      onClose,
-      enableTorch = true,
-      showControls = true,
-      enableVideo = true,
-      maxVideoDuration = 60,
-      timerOptions = [0, 3, 10],
-      facing: initialFacing = 'back',
-    },
-    ref
-  ) => {
-    const cameraRef = useRef<CameraView>(null);
-    const recordingInterval = useRef<number | null>(null);
-    const timerInterval = useRef<number | null>(null);
-
-    const fadeAnim = useSharedValue(0);
-    const settingsAnim = useSharedValue(0);
-    const zoomTextAnim = useSharedValue(0);
-    const zoomControlsAnim = useSharedValue(0);
-    const zoom = useSharedValue(0);
-    const baseZoom = useSharedValue(0);
-
-    const aspectRatios: Array<CameraRatio> = ['16:9', '4:3', '1:1'];
-
-    const [permission, requestPermission] = useCameraPermissions();
-    const [torch, setTorch] = useState(false);
-    const [isCapturing, setIsCapturing] = useState(false);
-    const [isRecording, setIsRecording] = useState(false);
-    const [recordingTime, setRecordingTime] = useState(0);
-    const [mode, setMode] = useState<CameraMode>('picture');
-    const [facing, setFacing] = useState<CameraType>(initialFacing);
-    const [showGrid, setShowGrid] = useState(false);
-    const [timerSeconds, setTimerSeconds] = useState(0);
-    const [selectedTimer, setSelectedTimer] = useState<number>(0);
-    const [isTimerActive, setIsTimerActive] = useState(false);
-    const [soundEnabled, setSoundEnabled] = useState(true);
-    const [showSettings, setShowSettings] = useState(false);
-    const [aspectRatioIndex, setAspectRatioIndex] = useState(1);
-    const [zoomControls, setZoomControls] = useState(false);
-    const [availableZoomFactors] = useState<number[]>([
-      0, 0.25, 0.5, 0.75, 1.0,
-    ]);
-    const [currentZoomIndex, setCurrentZoomIndex] = useState(0);
-    const [zoomFactorText, setZoomFactorText] = useState('1×');
-    const [zoomProgress, setZoomProgress] = useState(0);
-
-    const backgroundColor = useColor('background');
-    const textColor = useColor('text');
-    const primaryColor = useColor('primary');
-    const cardColor = useColor('card');
-    const destructiveColor = useColor('destructive');
-
-    useAnimatedReaction(
-      () => zoom.value,
-      (currentValue) => {
-        const text =
-          currentValue === 0 ? '1×' : `${(1 + currentValue * 4).toFixed(1)}×`; // Adjusted to .toFixed(1) for smoother feedback
-        runOnJS(setZoomFactorText)(text);
-        runOnJS(setZoomProgress)(currentValue * 100);
-      },
-      []
-    );
-
-    const animatedContainerStyle = useAnimatedStyle(() => ({
-      opacity: fadeAnim.value,
-    }));
-    const animatedSettingsStyle = useAnimatedStyle(() => ({
-      opacity: settingsAnim.value,
-      transform: [
-        { translateY: interpolate(settingsAnim.value, [0, 1], [-100, 0]) },
-      ],
-    }));
-    const animatedZoomTextStyle = useAnimatedStyle(() => ({
-      opacity: zoomTextAnim.value,
-    }));
-    const animatedZoomControlsStyle = useAnimatedStyle(() => ({
-      opacity: zoomControlsAnim.value,
-    }));
-    const animatedCameraProps = useAnimatedProps(() => ({ zoom: zoom.value }));
-
-    const pinchGesture = Gesture.Pinch()
-      .onStart(() => {
-        'worklet';
-        // Save the current zoom level when the pinch gesture begins
-        baseZoom.value = zoom.value;
-      })
-      .onUpdate((event) => {
-        'worklet';
-        // Calculate new zoom based on the starting zoom and the current scale
-        // The sensitivity factor (e.g., * 0.5) can be adjusted for feel
-        const newZoom = baseZoom.value + (event.scale - 1) * 0.5;
-        // Clamp the zoom value between 0 and 1
-        zoom.value = Math.min(Math.max(newZoom, 0), 1);
-      })
-      .onEnd(() => {
-        'worklet';
-        // We no longer need to set baseZoom here.
-        // Just animate the indicator.
-        zoomTextAnim.value = withSequence(
-          withTiming(1, { duration: 200 }),
-          withDelay(1000, withTiming(0, { duration: 200 }))
-        );
-      });
-
-    const doubleTapGesture = Gesture.Tap()
-      .numberOfTaps(2)
-      .onEnd(() => {
-        'worklet';
-        const newZoom = zoom.value > 0 ? 0 : 0.5;
-        zoom.value = withTiming(newZoom);
-        baseZoom.value = newZoom; // Keep this for double tap, as it's an instant change
-        zoomTextAnim.value = withSequence(
-          withTiming(1, { duration: 200 }),
-          withDelay(1000, withTiming(0, { duration: 200 }))
-        );
-      });
-
-    const composedGestures = Gesture.Simultaneous(
-      pinchGesture,
-      doubleTapGesture
-    );
-
-    useImperativeHandle(ref, () => ({
-      switchCamera: toggleCameraFacing,
-      toggleTorch,
-      takePicture: handleCapture,
-      startRecording: handleStartRecording,
-      stopRecording: handleStopRecording,
-    }));
-
-    useEffect(() => {
-      fadeAnim.value = withTiming(1, { duration: 300 });
-    }, [fadeAnim]);
-
-    useEffect(() => {
-      zoomControlsAnim.value = withTiming(zoomControls ? 1 : 0, {
-        duration: 300,
-      });
-    }, [zoomControls, zoomControlsAnim]);
-
-    useEffect(() => {
-      return () => {
-        if (recordingInterval.current) clearInterval(recordingInterval.current);
-        if (timerInterval.current) clearInterval(timerInterval.current);
-      };
-    }, []);
-
-    const getCameraHeight = () => {
-      const currentAspectRatio = aspectRatios[aspectRatioIndex];
-      switch (currentAspectRatio) {
-        case '16:9':
-          return (screenWidth * 16) / 9;
-        case '1:1':
-          return screenWidth;
-        case '4:3':
-        default:
-          return (screenWidth * 4) / 3;
-      }
-    };
-
-    const startTimer = (seconds: number) => {
-      setTimerSeconds(seconds);
-      setIsTimerActive(true);
-      timerInterval.current = setInterval(() => {
-        setTimerSeconds((prev) => {
-          if (prev <= 1) {
-            setIsTimerActive(false);
-            if (timerInterval.current) clearInterval(timerInterval.current);
-            setTimeout(() => {
-              if (mode === 'picture') handleActualCapture();
-              else handleStartRecording();
-            }, 100);
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-    };
-
-    const cancelTimer = () => {
-      if (timerInterval.current) clearInterval(timerInterval.current);
-      setIsTimerActive(false);
-      setTimerSeconds(0);
-    };
-
-    const handleActualCapture = async () => {
-      if (!cameraRef.current || isCapturing || isRecording) return;
-      try {
-        setIsCapturing(true);
-        const picture = await cameraRef.current.takePictureAsync({
-          quality: 1,
-          base64: false,
-          exif: true,
-        });
-        if (picture && onCapture)
-          onCapture({
-            type: 'picture',
-            uri: picture.uri,
-            cameraHeight: getCameraHeight(),
-          });
-      } catch (error) {
-        console.error('Error taking picture:', error);
-        Alert.alert('Error', 'Failed to take picture');
-      } finally {
-        setIsCapturing(false);
-      }
-    };
-
-    const handleStartRecording = async () => {
-      if (!cameraRef.current || isRecording || isCapturing) return;
-      try {
-        setIsRecording(true);
-        setRecordingTime(0);
-        recordingInterval.current = setInterval(() => {
-          setRecordingTime((prev) => {
-            if (prev >= maxVideoDuration) {
-              handleStopRecording();
-              return prev;
-            }
-            return prev + 1;
-          });
-        }, 1000);
-        const video = await cameraRef.current.recordAsync({
-          maxDuration: maxVideoDuration,
-        });
-        if (video && onVideoCapture)
-          onVideoCapture({
-            type: 'video',
-            uri: video.uri,
-            cameraHeight: getCameraHeight(),
-          });
-      } catch (error) {
-        console.error('Error starting recording:', error);
-        Alert.alert('Error', 'Failed to start recording');
-        setIsRecording(false);
-      }
-    };
-
-    const handleCapture = async () => {
-      if (isCapturing || isRecording || isTimerActive) return;
-      if (selectedTimer > 0) startTimer(selectedTimer);
-      else if (mode === 'picture') handleActualCapture();
-      else handleStartRecording();
-    };
-
-    const handleStopRecording = async () => {
-      if (!cameraRef.current || !isRecording) return;
-      try {
-        await cameraRef.current.stopRecording();
-        if (recordingInterval.current) clearInterval(recordingInterval.current);
-      } catch (error) {
-        console.error('Error stopping recording:', error);
-      } finally {
-        setIsRecording(false);
-        setRecordingTime(0);
-      }
-    };
-
-    const toggleCameraFacing = () =>
-      setFacing((c) => (c === 'back' ? 'front' : 'back'));
-    const toggleTorch = () => setTorch((c) => !c);
-    const toggleMode = () => {
-      if (!isRecording && !isCapturing)
-        setMode((c) => (c === 'picture' ? 'video' : 'picture'));
-    };
-
-    const toggleSettings = () => {
-      setShowSettings((prev) => {
-        const newValue = !prev;
-        settingsAnim.value = withTiming(newValue ? 1 : 0, { duration: 300 });
-        return newValue;
-      });
-    };
-
-    const handleZoomSliderChange = (value: number) => {
-      const newZoom = value / 100;
-      zoom.value = newZoom;
-      baseZoom.value = newZoom;
-    };
-
-    const formatTime = (seconds: number) => {
-      const mins = Math.floor(seconds / 60);
-      const secs = seconds % 60;
-      return `${mins.toString().padStart(2, '0')}:${secs
-        .toString()
-        .padStart(2, '0')}`;
-    };
-
-    const getTimerButtonText = () =>
-      selectedTimer === 0 ? 'OFF' : `${selectedTimer}s`;
-
-    const handleZoomButtonTap = () => {
-      const nextIndex = (currentZoomIndex + 1) % availableZoomFactors.length;
-      const nextZoom = availableZoomFactors[nextIndex];
-      setCurrentZoomIndex(nextIndex);
-      zoom.value = withTiming(nextZoom);
-      baseZoom.value = nextZoom;
-      zoomTextAnim.value = withSequence(
-        withTiming(1, { duration: 200 }),
-        withDelay(1000, withTiming(0, { duration: 200 }))
-      );
-    };
-
-    if (!permission) {
-      return (
-        <View style={[styles.container, { backgroundColor }, style]}>
-          <ActivityIndicator size='large' color={primaryColor} />
-          <Text style={[styles.loadingText, { color: textColor }]}>
-            Loading camera...
-          </Text>
-        </View>
-      );
-    }
-
-    if (!permission.granted) {
-      return (
-        <View
-          style={[styles.permissionContainer, { backgroundColor: cardColor }]}
-        >
-          <CameraIcon
-            size={36}
-            color={textColor}
-            style={styles.permissionIcon}
-          />
-          <Text variant='title' style={{ textAlign: 'center' }}>
-            Camera Access Required
-          </Text>
-          <Text variant='body' style={{ textAlign: 'center' }}>
-            We need access to your camera to take pictures and videos
-          </Text>
-          <View style={{ width: '100%' }}>
-            <Button onPress={requestPermission} style={{ width: '100%' }}>
-              Grant Permission
-            </Button>
-          </View>
-        </View>
-      );
-    }
-
-    return (
-      <Animated.View
-        style={[
-          styles.container,
-          { backgroundColor },
-          style,
-          animatedContainerStyle,
-        ]}
-      >
-        <View style={[styles.cameraContainer, { height: getCameraHeight() }]}>
-          <GestureDetector gesture={composedGestures}>
-            <AnimatedCameraView
-              ref={cameraRef}
-              mode={mode}
-              style={styles.camera}
-              facing={facing}
-              enableTorch={torch}
-              animateShutter={true}
-              mirror={mode === 'picture' && facing === 'front'}
-              ratio={aspectRatios[aspectRatioIndex]}
-              animatedProps={animatedCameraProps}
-            >
-              {/* Children of CameraView are rendered as an overlay */}
-              {showGrid && (
-                <View style={styles.gridOverlay}>
-                  <View style={styles.gridLines}>
-                    <View style={[styles.gridLine, styles.verticalLine1]} />
-                    <View style={[styles.gridLine, styles.verticalLine2]} />
-                    <View style={[styles.gridLine, styles.horizontalLine1]} />
-                    <View style={[styles.gridLine, styles.horizontalLine2]} />
-                  </View>
-                </View>
-              )}
-              <Animated.View
-                style={[styles.zoomIndicator, animatedZoomTextStyle]}
-                pointerEvents='none'
-              >
-                <Text style={styles.zoomText}>{zoomFactorText}</Text>
-              </Animated.View>
-              {isTimerActive && (
-                <TouchableOpacity
-                  style={styles.timerOverlay}
-                  onPress={cancelTimer}
-                  activeOpacity={1}
-                >
-                  <Text style={styles.timerText}>{timerSeconds}</Text>
-                  <View style={styles.cancelTimerButton}>
-                    <X size={20} color='white' />
-                  </View>
-                  <Text style={styles.tapToCancelText}>Tap to cancel</Text>
-                </TouchableOpacity>
-              )}
-              {isRecording && (
-                <View style={styles.recordingIndicator}>
-                  <View style={styles.recordingDot} />
-                  <Text style={styles.recordingText}>
-                    REC {formatTime(recordingTime)}
-                  </Text>
-                </View>
-              )}
-              {showControls && (
-                <>
-                  <View style={styles.topControls}>
-                    <View style={styles.topLeft}>
-                      {onClose && (
-                        <TouchableOpacity
-                          style={[
-                            styles.controlButton,
-                            { backgroundColor: cardColor },
-                          ]}
-                          onPress={onClose}
-                          activeOpacity={0.7}
-                        >
-                          <X size={24} color={textColor} />
-                        </TouchableOpacity>
-                      )}
-                    </View>
-                    <View style={styles.topCenter}>
-                      <Text style={[styles.modeText, { color: textColor }]}>
-                        {mode.toUpperCase()}
-                      </Text>
-                    </View>
-                    <View style={styles.topRight}>
-                      <TouchableOpacity
-                        style={[
-                          styles.controlButton,
-                          { backgroundColor: cardColor },
-                        ]}
-                        onPress={toggleSettings}
-                        activeOpacity={0.7}
-                      >
-                        <Settings size={24} color={textColor} />
-                      </TouchableOpacity>
-                    </View>
-                  </View>
-                  <Animated.View
-                    style={[
-                      styles.settingsPanel,
-                      { backgroundColor: cardColor },
-                      animatedSettingsStyle,
-                    ]}
-                    pointerEvents={showSettings ? 'auto' : 'none'}
-                  >
-                    <View style={styles.settingsRow}>
-                      <TouchableOpacity
-                        style={[
-                          styles.settingButton,
-                          showGrid && { backgroundColor: primaryColor },
-                        ]}
-                        onPress={() => setShowGrid(!showGrid)}
-                      >
-                        <Grid3X3
-                          size={20}
-                          color={showGrid ? cardColor : textColor}
-                        />
-                      </TouchableOpacity>
-                      <TouchableOpacity
-                        style={[
-                          styles.settingButton,
-                          {
-                            backgroundColor: soundEnabled
-                              ? primaryColor
-                              : cardColor,
-                          },
-                        ]}
-                        onPress={() => setSoundEnabled(!soundEnabled)}
-                      >
-                        {soundEnabled ? (
-                          <Volume2 size={20} color={cardColor} />
-                        ) : (
-                          <VolumeX size={20} color={textColor} />
-                        )}
-                      </TouchableOpacity>
-                      <TouchableOpacity
-                        style={[
-                          styles.settingButton,
-                          { backgroundColor: cardColor },
-                        ]}
-                        onPress={() => setAspectRatioIndex((p) => (p + 1) % 3)}
-                      >
-                        <Text
-                          style={[styles.settingText, { color: textColor }]}
-                        >
-                          {aspectRatios[aspectRatioIndex]}
-                        </Text>
-                      </TouchableOpacity>
-                      <TouchableOpacity
-                        style={[
-                          styles.settingButton,
-                          {
-                            backgroundColor:
-                              selectedTimer > 0 ? primaryColor : cardColor,
-                          },
-                        ]}
-                        onPress={() => {
-                          const ci = timerOptions.indexOf(selectedTimer);
-                          const ni = (ci + 1) % timerOptions.length;
-                          setSelectedTimer(timerOptions[ni]);
-                        }}
-                      >
-                        <Timer
-                          size={16}
-                          color={selectedTimer > 0 ? cardColor : textColor}
-                        />
-                        <Text
-                          style={[
-                            styles.timerSettingText,
-                            {
-                              color: selectedTimer > 0 ? cardColor : textColor,
-                            },
-                          ]}
-                        >
-                          {getTimerButtonText()}
-                        </Text>
-                      </TouchableOpacity>
-                    </View>
-                  </Animated.View>
-                  <View style={styles.sideControls}>
-                    {enableTorch && facing === 'back' && (
-                      <TouchableOpacity
-                        style={[
-                          styles.controlButton,
-                          {
-                            backgroundColor: torch ? primaryColor : cardColor,
-                          },
-                        ]}
-                        onPress={toggleTorch}
-                        activeOpacity={0.7}
-                      >
-                        {torch ? (
-                          <Zap size={24} color={cardColor} />
-                        ) : (
-                          <ZapOff size={24} color={textColor} />
-                        )}
-                      </TouchableOpacity>
-                    )}
-                    <TouchableOpacity
-                      style={[
-                        styles.controlButton,
-                        { backgroundColor: cardColor },
-                      ]}
-                      onPress={toggleCameraFacing}
-                      activeOpacity={0.7}
-                    >
-                      <SwitchCamera size={24} color={textColor} />
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                      style={[
-                        styles.controlButton,
-                        {
-                          backgroundColor: zoomControls
-                            ? primaryColor
-                            : cardColor,
-                        },
-                      ]}
-                      onPress={handleZoomButtonTap}
-                      activeOpacity={0.7}
-                    >
-                      <Text
-                        style={{
-                          fontWeight: '600',
-                          color: zoomControls ? cardColor : textColor,
-                        }}
-                      >
-                        {zoomFactorText}
-                      </Text>
-                    </TouchableOpacity>
-                    {enableVideo && (
-                      <TouchableOpacity
-                        style={[
-                          styles.controlButton,
-                          { backgroundColor: cardColor },
-                        ]}
-                        onPress={toggleMode}
-                        disabled={isRecording || isCapturing}
-                        activeOpacity={0.7}
-                      >
-                        {mode === 'picture' ? (
-                          <Video size={24} color={textColor} />
-                        ) : (
-                          <CameraIcon size={24} color={textColor} />
-                        )}
-                      </TouchableOpacity>
-                    )}
-                  </View>
-                  <View style={styles.bottomControls}>
-                    <TouchableOpacity
-                      style={[
-                        styles.captureButton,
-                        {
-                          backgroundColor:
-                            mode === 'video' && isRecording
-                              ? destructiveColor
-                              : 'white',
-                          borderColor:
-                            mode === 'video' && isRecording
-                              ? destructiveColor
-                              : primaryColor,
-                        },
-                        (isCapturing || isTimerActive) &&
-                          styles.capturingButton,
-                      ]}
-                      onPress={
-                        mode === 'picture'
-                          ? handleCapture
-                          : isRecording
-                          ? handleStopRecording
-                          : handleCapture
-                      }
-                      disabled={isCapturing || isTimerActive}
-                      activeOpacity={0.8}
-                    >
-                      {isCapturing ? (
-                        <ActivityIndicator size='small' color={primaryColor} />
-                      ) : (
-                        <View
-                          style={[
-                            styles.captureInner,
-                            {
-                              backgroundColor:
-                                mode === 'video' && isRecording
-                                  ? 'white'
-                                  : primaryColor,
-                              borderRadius:
-                                mode === 'video' && isRecording ? 4 : 30,
-                            },
-                          ]}
-                        />
-                      )}
-                    </TouchableOpacity>
-                  </View>
-                </>
-              )}
-            </AnimatedCameraView>
-          </GestureDetector>
-        </View>
-      </Animated.View>
-    );
-  }
-);
-
-Camera.displayName = 'Camera';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  cameraContainer: {
-    width: screenWidth,
-    borderRadius: BORDER_RADIUS,
-    overflow: 'hidden',
-  },
-  camera: {
-    flex: 1,
-  },
-  topControls: {
-    position: 'absolute',
-    top: 20,
-    left: 20,
-    right: 20,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    zIndex: 1,
-  },
-  topLeft: {
-    flex: 1,
-    alignItems: 'flex-start',
-  },
-  topCenter: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  topRight: {
-    flex: 1,
-    alignItems: 'flex-end',
-  },
-  modeText: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    textShadowColor: 'rgba(0, 0, 0, 0.5)',
-    textShadowOffset: { width: 1, height: 1 },
-    textShadowRadius: 2,
-  },
-  settingsPanel: {
-    position: 'absolute',
-    top: 76,
-    left: 20,
-    right: 20,
-    borderRadius: BORDER_RADIUS,
-    padding: 16,
-    zIndex: 2,
-  },
-  settingsRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-  },
-  settingButton: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  settingText: {
-    fontSize: 12,
-    fontWeight: 'bold',
-  },
-  timerSettingText: {
-    fontSize: 10,
-    fontWeight: 'bold',
-    marginTop: 2,
-  },
-  sideControls: {
-    position: 'absolute',
-    right: 20,
-    top: '50%',
-    transform: [{ translateY: -120 }],
-    gap: 16,
-    zIndex: 1,
-  },
-  bottomControls: {
-    position: 'absolute',
-    bottom: 40,
-    left: 20,
-    right: 20,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1,
-  },
-  controlButton: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  captureButton: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    borderWidth: 4,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-  },
-  captureInner: {
-    width: 32,
-    height: 32,
-    borderRadius: 30,
-  },
-  capturingButton: {
-    transform: [{ scale: 0.9 }],
-  },
-  gridOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 1,
-  },
-  gridLines: {
-    flex: 1,
-    position: 'relative',
-  },
-  gridLine: {
-    position: 'absolute',
-    backgroundColor: 'rgba(255, 255, 255, 0.3)',
-  },
-  verticalLine1: {
-    left: '33.33%',
-    top: 0,
-    bottom: 0,
-    width: 1,
-  },
-  verticalLine2: {
-    left: '66.66%',
-    top: 0,
-    bottom: 0,
-    width: 1,
-  },
-  horizontalLine1: {
-    top: '33.33%',
-    left: 0,
-    right: 0,
-    height: 1,
-  },
-  horizontalLine2: {
-    top: '66.66%',
-    left: 0,
-    right: 0,
-    height: 1,
-  },
-  zoomIndicator: {
-    position: 'absolute',
-    top: '45%',
-    alignSelf: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 20,
-    zIndex: 2,
-  },
-  zoomText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  timerOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 3,
-  },
-  timerText: {
-    fontSize: 72,
-    fontWeight: 'bold',
-    color: 'white',
-    textAlign: 'center',
-  },
-  cancelTimerButton: {
-    position: 'absolute',
-    top: 60,
-    right: 20,
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  tapToCancelText: {
-    position: 'absolute',
-    bottom: 100,
-    color: 'white',
-    fontSize: 16,
-    textAlign: 'center',
-  },
-  recordingIndicator: {
-    position: 'absolute',
-    top: 20,
-    left: 20,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'rgba(255, 0, 0, 0.8)',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16,
-    zIndex: 2,
-  },
-  recordingDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: 'white',
-    marginRight: 8,
-  },
-  recordingText: {
-    color: 'white',
-    fontSize: 14,
-    fontWeight: 'bold',
-  },
-  permissionContainer: {
-    gap: 16,
-    padding: 32,
-    borderRadius: BORDER_RADIUS,
-    alignItems: 'center',
-  },
-  permissionIcon: {
-    marginBottom: 16,
-  },
-  loadingText: {
-    marginTop: 16,
-    fontSize: FONT_SIZE,
-  },
-  zoomControls: {
-    position: 'absolute',
-    right: 20,
-    top: '25%',
-    padding: 12,
-    borderRadius: 12,
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 100,
-  },
-  sliderContainer: {
-    height: 200,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: 10,
-    transform: [{ rotate: '-90deg' }],
-  },
-  zoomSlider: {
-    width: 160,
-    borderRadius: 999,
-  },
-  zoomValue: {
-    fontSize: 14,
-    fontWeight: 'bold',
-  },
-  currentZoomText: {
-    marginTop: 12,
-    fontSize: 12,
-    fontWeight: '600',
-  },
-});
-
-export default Camera;