@technotoil/image-video-editor 0.1.0

package/lib/module/screens/PickScreen.js

@@ -0,0 +1,1195 @@
+"use strict";
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Alert, Animated, FlatList, Image, Modal, PermissionsAndroid, Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import ImagePicker from 'react-native-image-crop-picker';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { CameraView } from "../native/CameraView.js";
+import { exportAsset, listAlbums, listMedia, requestMediaAccess } from "../native/MediaLibrary.js";
+import { VideoPreview } from "../native/VideoPreview.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const TABS = ['GALLERY', 'PHOTO', 'VIDEO'];
+const POST_TYPES = ['POST', 'STORY', 'REEL'];
+const CameraIcon = () => /*#__PURE__*/_jsxs(View, {
+  style: {
+    width: 30,
+    height: 22,
+    borderWidth: 2,
+    borderColor: '#fff',
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  children: [/*#__PURE__*/_jsx(View, {
+    style: {
+      width: 10,
+      height: 10,
+      borderRadius: 5,
+      borderWidth: 2,
+      borderColor: '#fff'
+    }
+  }), /*#__PURE__*/_jsx(View, {
+    style: {
+      width: 6,
+      height: 3,
+      backgroundColor: '#fff',
+      position: 'absolute',
+      top: -4,
+      left: 4,
+      borderRadius: 1
+    }
+  })]
+});
+function formatDuration(ms) {
+  if (!ms || ms <= 0) return '';
+  const total = Math.floor(ms / 1000);
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+export function PickScreen({
+  items,
+  onPicked,
+  onNext,
+  headerTitle = 'New post',
+  customCancelIcon,
+  onCancelPress,
+  cameraModes = ['POST', 'STORY', 'REEL'],
+  onCameraModeChange,
+  defaultCameraMode
+}) {
+  const insets = useSafeAreaInsets();
+  const [tab, setTab] = useState('GALLERY');
+  const [activeAlbum, setActiveAlbum] = useState({
+    id: 'all',
+    title: 'Recents'
+  });
+  const [showAlbumPicker, setShowAlbumPicker] = useState(false);
+  const [postType, setPostType] = useState('POST');
+  const [multiSelect, setMultiSelect] = useState(false);
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [selectedMedia, setSelectedMedia] = useState(null);
+  const [library, setLibrary] = useState([]);
+  const [albums, setAlbums] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [previewUri, setPreviewUri] = useState(null);
+  const [cropMode, setCropMode] = useState('1:1');
+  const [videoPaused, setVideoPaused] = useState(false);
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const [showCustomCamera, setShowCustomCamera] = useState(false);
+  const [facing, setFacing] = useState('front');
+  const [flashMode, setFlashMode] = useState('off');
+  const [isRecording, setIsRecording] = useState(false);
+  const isRecordingRef = useRef(false);
+  const cameraRef = useRef(null);
+  const [activeCameraMode, setActiveCameraMode] = useState(() => {
+    if (defaultCameraMode) {
+      const matched = cameraModes.find(m => m.toUpperCase() === defaultCameraMode.toUpperCase());
+      if (matched) return matched;
+    }
+    return cameraModes.includes('STORY') ? 'STORY' : cameraModes[0] || 'STORY';
+  });
+  useEffect(() => {
+    onCameraModeChange?.(activeCameraMode);
+  }, [activeCameraMode, onCameraModeChange]);
+  const handleCameraMediaCaptured = (uri, type, width, height, durationMs) => {
+    setShowCustomCamera(false);
+    const item = {
+      id: 'camera_' + Date.now(),
+      uri: uri,
+      type: type,
+      thumbnailUri: uri,
+      width: width,
+      height: height,
+      durationMs: durationMs
+    };
+    setLibrary(prev => [item, ...prev]);
+    setSelectedMedia(item);
+    setSelectedItems([item]);
+    onPicked([item]);
+    onNext([item]);
+  };
+  const handlePress = async () => {
+    if (isRecordingRef.current) {
+      return;
+    }
+    try {
+      const photo = await cameraRef.current?.capturePhoto();
+      if (photo) {
+        handleCameraMediaCaptured(photo.uri, 'image', photo.width, photo.height);
+      }
+    } catch (err) {
+      console.error('PickScreen: capturePhoto error:', err);
+      Alert.alert('Capture Error', err?.message ?? 'Failed to capture photo');
+    }
+  };
+  const handleLongPress = async () => {
+    try {
+      isRecordingRef.current = true;
+      setIsRecording(true);
+      await cameraRef.current?.startRecording();
+    } catch (err) {
+      isRecordingRef.current = false;
+      setIsRecording(false);
+      Alert.alert('Recording Error', err?.message ?? 'Failed to start recording');
+    }
+  };
+  const handlePressOut = async () => {
+    if (!isRecordingRef.current) return;
+    try {
+      const video = await cameraRef.current?.stopRecording();
+      isRecordingRef.current = false;
+      setIsRecording(false);
+      if (video) {
+        handleCameraMediaCaptured(video.uri, 'video', video.width, video.height, video.durationMs);
+      }
+    } catch (err) {
+      isRecordingRef.current = false;
+      setIsRecording(false);
+      Alert.alert('Recording Error', err?.message ?? 'Failed to stop recording');
+    }
+  };
+  const loadMedia = async albumId => {
+    try {
+      setLoading(true);
+      const assets = await listMedia({
+        limit: 200,
+        offset: 0,
+        type: 'all',
+        albumId: albumId === 'all' ? undefined : albumId
+      });
+      setLibrary(assets);
+      if (assets[0] && !multiSelect) {
+        setSelectedMedia(assets[0]);
+      }
+    } catch (err) {
+      Alert.alert('Library error', err?.message ?? 'Failed to load library.');
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    (async () => {
+      try {
+        const ok = await requestMediaAccess();
+        if (!ok) {
+          Alert.alert('Permission needed', 'Allow photo access to continue.');
+          return;
+        }
+        const fetchedAlbums = await listAlbums();
+        setAlbums([{
+          id: 'all',
+          title: 'Recents'
+        }, ...fetchedAlbums]);
+        loadMedia('all');
+      } catch (err) {
+        console.error('Initial load failed', err);
+      }
+    })();
+  }, []);
+  const filtered = useMemo(() => {
+    let list = library;
+    if (tab === 'PHOTO') list = library.filter(i => i.type === 'image');else if (tab === 'VIDEO') list = library.filter(i => i.type === 'video');
+    const cameraItem = {
+      id: 'camera_trigger',
+      uri: 'camera_trigger',
+      type: 'image'
+    };
+    return [cameraItem, ...list];
+  }, [library, tab]);
+  useEffect(() => {
+    let cancelled = false;
+    setVideoPaused(false);
+    (async () => {
+      if (!selectedMedia) {
+        setPreviewUri(null);
+        return;
+      }
+      if (!selectedMedia.uri.startsWith('ph://') && !selectedMedia.uri.startsWith('content://')) {
+        setPreviewUri(selectedMedia.uri);
+        return;
+      }
+      try {
+        const fileUri = await exportAsset(selectedMedia.id);
+        if (!cancelled) setPreviewUri(fileUri);
+      } catch {
+        if (!cancelled) setPreviewUri(null);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedMedia]);
+  const playableUri = useMemo(() => {
+    if (!selectedMedia) return null;
+    if (previewUri && !previewUri.startsWith('ph://') && !previewUri.startsWith('content://')) return previewUri;
+    if (selectedMedia.uri && !selectedMedia.uri.startsWith('ph://') && !selectedMedia.uri.startsWith('content://')) return selectedMedia.uri;
+    return null;
+  }, [previewUri, selectedMedia]);
+  const toggleMultiSelect = () => {
+    setMultiSelect(v => !v);
+    setSelectedItems([]);
+  };
+  const handleSelectItem = item => {
+    setSelectedMedia(item);
+    if (multiSelect) {
+      setSelectedItems(prev => {
+        const exists = prev.find(i => i.id === item.id);
+        if (exists) return prev.filter(i => i.id !== item.id);
+        if (prev.length >= 10) return prev;
+        return [...prev, item];
+      });
+    }
+    Animated.sequence([Animated.timing(scaleAnim, {
+      toValue: 0.97,
+      duration: 80,
+      useNativeDriver: true
+    }), Animated.timing(scaleAnim, {
+      toValue: 1,
+      duration: 80,
+      useNativeDriver: true
+    })]).start();
+  };
+  const handleLongPressItem = item => {
+    if (!multiSelect) {
+      setMultiSelect(true);
+      setSelectedItems([item]);
+      setSelectedMedia(item);
+      Animated.sequence([Animated.timing(scaleAnim, {
+        toValue: 0.97,
+        duration: 80,
+        useNativeDriver: true
+      }), Animated.timing(scaleAnim, {
+        toValue: 1,
+        duration: 80,
+        useNativeDriver: true
+      })]).start();
+    }
+  };
+  const openImageCropPickerCamera = async type => {
+    try {
+      const result = await ImagePicker.openCamera({
+        mediaType: type
+      });
+      if (result) {
+        const item = {
+          id: 'camera_' + Date.now(),
+          uri: result.path,
+          type: type === 'photo' ? 'image' : 'video',
+          thumbnailUri: result.path,
+          width: result.width,
+          height: result.height,
+          durationMs: type === 'video' ? result.duration || 10000 : undefined
+        };
+        setLibrary(prev => [item, ...prev]);
+        setSelectedMedia(item);
+        setSelectedItems([item]);
+        onPicked([item]);
+        onNext([item]);
+      }
+    } catch (err) {
+      if (err?.message !== 'User cancelled image selection' && err?.message !== 'User cancelled image selection.') {
+        Alert.alert('Camera error', err?.message ?? 'Failed to open camera.');
+      }
+    }
+  };
+  const handleOpenCamera = async () => {
+    if (Platform.OS === 'android') {
+      try {
+        const cameraGranted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA, {
+          title: 'Camera Permission',
+          message: 'App needs access to your camera to take photos and record videos.',
+          buttonNeutral: 'Ask Me Later',
+          buttonNegative: 'Cancel',
+          buttonPositive: 'OK'
+        });
+        const audioGranted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, {
+          title: 'Microphone Permission',
+          message: 'App needs access to your microphone to record audio for videos.',
+          buttonNeutral: 'Ask Me Later',
+          buttonNegative: 'Cancel',
+          buttonPositive: 'OK'
+        });
+        if (cameraGranted !== PermissionsAndroid.RESULTS.GRANTED || audioGranted !== PermissionsAndroid.RESULTS.GRANTED) {
+          Alert.alert('Permissions Required', 'Camera and Microphone permissions are required to use the custom camera.');
+          return;
+        }
+      } catch (err) {
+        console.warn(err);
+        return;
+      }
+    }
+    setFacing('front');
+    setShowCustomCamera(true);
+  };
+  const getSelectionIndex = id => {
+    const idx = selectedItems.findIndex(i => i.id === id);
+    return idx === -1 ? null : idx + 1;
+  };
+  const handleNext = () => {
+    const picked = multiSelect ? selectedItems : selectedMedia ? [selectedMedia] : [];
+    if (picked.length === 0) {
+      Alert.alert('Select media', 'Choose at least one item.');
+      return;
+    }
+    onPicked(picked);
+    onNext(picked);
+  };
+  const renderThumb = ({
+    item
+  }) => {
+    if (item.id === 'camera_trigger') {
+      return /*#__PURE__*/_jsx(Pressable, {
+        style: styles.cameraGridContainer,
+        onPress: handleOpenCamera,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.cameraGridBox,
+          children: /*#__PURE__*/_jsx(CameraIcon, {})
+        })
+      });
+    }
+    const thumbUri = item.thumbnailUri;
+    const selIdx = getSelectionIndex(item.id);
+    const isActive = multiSelect ? !!selIdx : selectedMedia?.id === item.id;
+    return /*#__PURE__*/_jsxs(Pressable, {
+      style: styles.thumbContainer,
+      onPress: () => handleSelectItem(item),
+      onLongPress: () => handleLongPressItem(item),
+      children: [thumbUri ? /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: thumbUri
+        },
+        style: styles.thumb
+      }) : /*#__PURE__*/_jsx(View, {
+        style: [styles.thumb, styles.thumbFallback]
+      }), isActive && !multiSelect && /*#__PURE__*/_jsx(View, {
+        style: styles.activeOverlay
+      }), multiSelect && /*#__PURE__*/_jsx(View, {
+        style: [styles.multiOverlay, isActive && styles.multiOverlayActive],
+        children: isActive ? /*#__PURE__*/_jsx(View, {
+          style: styles.selectionBadge,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.selectionNumber,
+            children: selIdx
+          })
+        }) : /*#__PURE__*/_jsx(View, {
+          style: styles.emptyBadge
+        })
+      }), item.type === 'video' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.videoPlayBadge,
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: "play",
+            size: 10,
+            color: "#fff"
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.videoBadge,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.videoDuration,
+            children: formatDuration(item.durationMs)
+          })
+        })]
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        onPress: () => {
+          if (onCancelPress) {
+            onCancelPress();
+          } else {
+            onNext([]);
+          }
+        },
+        children: customCancelIcon ? customCancelIcon : /*#__PURE__*/_jsx(Ionicons, {
+          name: "close",
+          size: 22,
+          color: "#fff"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.headerTitle,
+        children: headerTitle
+      }), /*#__PURE__*/_jsx(Pressable, {
+        style: styles.nextBtn,
+        onPress: handleNext,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.nextText,
+          children: "Next"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Modal, {
+      visible: showAlbumPicker,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: () => setShowAlbumPicker(false),
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        style: styles.albumSheetBackdrop,
+        onPress: () => setShowAlbumPicker(false)
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.albumSheet,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.albumSheetHandle
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.albumSheetTitle,
+          children: "Select Album"
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          bounces: false,
+          children: albums.map(album => /*#__PURE__*/_jsxs(Pressable, {
+            style: styles.albumSheetOption,
+            onPress: () => {
+              setActiveAlbum(album);
+              setShowAlbumPicker(false);
+              loadMedia(album.id);
+            },
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.albumSheetOptionText, activeAlbum.id === album.id && styles.albumSheetOptionActive],
+              children: album.title
+            }), activeAlbum.id === album.id && /*#__PURE__*/_jsx(Ionicons, {
+              name: "checkmark",
+              size: 20,
+              color: "#3b82f6"
+            })]
+          }, album.id))
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Animated.View, {
+      style: [styles.preview, {
+        transform: [{
+          scale: scaleAnim
+        }]
+      }],
+      children: [selectedMedia?.type === 'video' ? /*#__PURE__*/_jsxs(Pressable, {
+        style: styles.previewImage,
+        onPress: () => setVideoPaused(v => !v),
+        children: [playableUri ? /*#__PURE__*/_jsx(VideoPreview, {
+          uri: playableUri,
+          paused: videoPaused,
+          muted: false,
+          style: styles.previewImage,
+          resizeMode: cropMode === '1:1' ? 'cover' : 'contain'
+        }) : /*#__PURE__*/_jsx(Image, {
+          source: {
+            uri: selectedMedia.thumbnailUri || selectedMedia.uri
+          },
+          style: styles.previewImage,
+          resizeMode: "cover"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.previewOverlay,
+          children: /*#__PURE__*/_jsx(View, {
+            style: styles.playPauseCircle,
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: videoPaused ? 'play' : 'pause',
+              size: 24,
+              color: "#fff"
+            })
+          })
+        })]
+      }) : /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: previewUri ?? selectedMedia?.uri
+        },
+        style: [styles.previewImage, cropMode === '1:1' ? styles.squareCrop : styles.originalCrop],
+        resizeMode: cropMode === '1:1' ? 'cover' : 'contain'
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.previewControls,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          style: styles.cropToggle,
+          onPress: () => setCropMode(v => v === '1:1' ? 'original' : '1:1'),
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: cropMode === '1:1' ? 'square-outline' : 'expand-outline',
+            size: 20,
+            color: "#fff"
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.albumRow,
+      children: [/*#__PURE__*/_jsxs(Pressable, {
+        style: styles.albumSelector,
+        onPress: () => setShowAlbumPicker(v => !v),
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.albumTitle,
+          children: activeAlbum.title
+        }), /*#__PURE__*/_jsx(Ionicons, {
+          name: "chevron-down",
+          size: 16,
+          color: "#fff",
+          style: {
+            marginLeft: 6
+          }
+        })]
+      }), /*#__PURE__*/_jsx(Pressable, {
+        style: [styles.multiSelectBtn, multiSelect && styles.multiSelectBtnActive],
+        onPress: toggleMultiSelect,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.multiSelectText, multiSelect && styles.multiSelectTextActive],
+          children: multiSelect ? 'Done' : 'Select'
+        })
+      })]
+    }), /*#__PURE__*/_jsx(FlatList, {
+      data: filtered,
+      keyExtractor: item => item.id,
+      numColumns: 4,
+      style: styles.libraryList,
+      renderItem: renderThumb,
+      contentContainerStyle: styles.grid,
+      ListEmptyComponent: /*#__PURE__*/_jsx(View, {
+        style: styles.empty,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: loading ? 'Loading…' : 'No media found'
+        })
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.tabBar,
+      children: TABS.map(t => /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => setTab(t),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.tab, tab === t && styles.tabActive],
+          children: t
+        })
+      }, t))
+    }), /*#__PURE__*/_jsx(Modal, {
+      visible: showCustomCamera,
+      animationType: "slide",
+      transparent: false,
+      onRequestClose: () => setShowCustomCamera(false),
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.cameraContainer,
+        children: [/*#__PURE__*/_jsx(CameraView, {
+          ref: cameraRef,
+          facing: facing,
+          flashMode: facing === 'front' ? 'off' : flashMode,
+          style: StyleSheet.absoluteFillObject
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.cameraGridOverlay,
+          pointerEvents: "none",
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.gridRow,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.gridCell
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.gridCell, styles.gridCellMiddleCol]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.gridCell
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: [styles.gridRow, styles.gridRowMiddleRow],
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.gridCell
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.gridCell, styles.gridCellMiddleCol]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.gridCell
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.gridRow,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.gridCell
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.gridCell, styles.gridCellMiddleCol]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.gridCell
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [styles.cameraHeader, {
+            top: Math.max(insets.top, 16)
+          }],
+          children: [/*#__PURE__*/_jsx(Pressable, {
+            style: styles.cameraCloseBtn,
+            onPress: () => setShowCustomCamera(false),
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "close",
+              size: 22,
+              color: "#fff"
+            })
+          }), /*#__PURE__*/_jsx(Pressable, {
+            style: [styles.cameraFlashContainer, facing === 'front' && {
+              opacity: 0.3
+            }],
+            onPress: () => setFlashMode(f => f === 'on' ? 'off' : 'on'),
+            disabled: facing === 'front',
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: flashMode === 'on' && facing === 'back' ? 'flash' : 'flash-off',
+              size: 22,
+              color: flashMode === 'on' && facing === 'back' ? '#FFD700' : 'rgba(255,255,255,0.4)'
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [styles.cameraFooter, {
+            bottom: Math.max(insets.bottom + 60, 60)
+          }],
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.cameraGalleryPreview,
+            children: library.length > 1 && library[1].thumbnailUri ? /*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: library[1].thumbnailUri
+              },
+              style: styles.cameraGalleryThumb
+            }) : /*#__PURE__*/_jsx(View, {
+              style: styles.cameraGalleryThumbPlaceholder
+            })
+          }), /*#__PURE__*/_jsx(Pressable, {
+            style: [styles.captureRing, isRecording && styles.captureRingRecording],
+            onPress: handlePress,
+            onLongPress: handleLongPress,
+            onPressOut: handlePressOut,
+            delayLongPress: 200,
+            children: /*#__PURE__*/_jsx(View, {
+              style: [styles.captureButton, isRecording && styles.captureButtonRecording]
+            })
+          }), /*#__PURE__*/_jsx(Pressable, {
+            style: styles.flipCameraBtn,
+            onPress: () => setFacing(f => f === 'front' ? 'back' : 'front'),
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "camera-reverse-outline",
+              size: 26,
+              color: "#fff"
+            })
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.cameraModeBar, {
+            bottom: Math.max(insets.bottom + 12, 16)
+          }],
+          children: /*#__PURE__*/_jsx(ScrollView, {
+            horizontal: true,
+            showsHorizontalScrollIndicator: false,
+            contentContainerStyle: styles.cameraModeScrollContainer,
+            children: cameraModes.map(mode => {
+              const isActive = mode === activeCameraMode;
+              return /*#__PURE__*/_jsx(Pressable, {
+                onPress: () => setActiveCameraMode(mode),
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: isActive ? styles.cameraModeTextActive : styles.cameraModeTextInactive,
+                  children: mode
+                })
+              }, mode);
+            })
+          })
+        })]
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0b0f1a'
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 0,
+    backgroundColor: '#0b0f1a',
+    zIndex: 10,
+    elevation: 10
+  },
+  headerTitle: {
+    color: '#fff',
+    fontWeight: '700',
+    fontSize: 18
+  },
+  headerCancel: {
+    fontSize: 20,
+    color: '#fff'
+  },
+  nextBtn: {
+    backgroundColor: '#2563eb',
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 20
+  },
+  nextText: {
+    color: '#fff',
+    fontWeight: '700'
+  },
+  albumDropdown: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#111827',
+    backgroundColor: '#0b0f1a'
+  },
+  albumOption: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 10
+  },
+  albumOptionText: {
+    fontSize: 14,
+    color: '#e5e7eb'
+  },
+  albumOptionActive: {
+    fontWeight: '700'
+  },
+  checkmark: {
+    color: '#2563eb',
+    fontWeight: '700'
+  },
+  // Bottom sheet styles
+  albumSheetBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.55)'
+  },
+  albumSheet: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#161b2e',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingBottom: 32,
+    maxHeight: '60%'
+  },
+  albumSheetHandle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#3f4a6e',
+    alignSelf: 'center',
+    marginTop: 12,
+    marginBottom: 6
+  },
+  albumSheetTitle: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '700',
+    textAlign: 'center',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#1f2a45'
+  },
+  albumSheetOption: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#1a2240'
+  },
+  albumSheetOptionText: {
+    fontSize: 15,
+    color: '#cbd5e1'
+  },
+  albumSheetOptionActive: {
+    color: '#fff',
+    fontWeight: '700'
+  },
+  albumSheetCheckmark: {
+    color: '#3b82f6',
+    fontSize: 18,
+    fontWeight: '700'
+  },
+  preview: {
+    width: '100%',
+    height: 420,
+    backgroundColor: '#0f172a',
+    overflow: 'hidden'
+  },
+  previewImage: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden'
+  },
+  squareCrop: {
+    height: '100%'
+  },
+  originalCrop: {
+    height: '100%'
+  },
+  previewControls: {
+    position: 'absolute',
+    left: 16,
+    right: 16,
+    bottom: 16,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center'
+  },
+  cropToggle: {
+    backgroundColor: 'rgba(0,0,0,0.65)',
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  cropIcon: {
+    color: '#fff',
+    fontSize: 16
+  },
+  albumRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 10
+  },
+  albumSelector: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  albumTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#fff'
+  },
+  albumArrow: {
+    width: 10,
+    height: 10,
+    borderRightWidth: 2,
+    borderBottomWidth: 2,
+    borderColor: '#fff',
+    marginLeft: 8,
+    marginTop: -4,
+    transform: [{
+      rotate: '45deg'
+    }]
+  },
+  multiSelectBtn: {
+    backgroundColor: '#111827',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 18
+  },
+  cameraGridContainer: {
+    width: '25%',
+    aspectRatio: 1,
+    padding: 1
+  },
+  cameraGridBox: {
+    flex: 1,
+    backgroundColor: '#262626',
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  multiSelectBtnActive: {
+    backgroundColor: '#2563eb'
+  },
+  multiSelectText: {
+    color: '#e5e7eb',
+    fontSize: 12,
+    fontWeight: '700'
+  },
+  multiSelectTextActive: {
+    color: '#fff'
+  },
+  postTypeBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    paddingVertical: 12,
+    backgroundColor: '#0b0f1a'
+  },
+  postTypeChip: {
+    paddingHorizontal: 28,
+    paddingVertical: 10,
+    borderRadius: 20,
+    backgroundColor: '#111827'
+  },
+  postTypeChipActive: {
+    backgroundColor: '#1d4ed8'
+  },
+  postTypeText: {
+    color: '#9ca3af',
+    fontWeight: '700',
+    letterSpacing: 0.4
+  },
+  postTypeTextActive: {
+    color: '#fff'
+  },
+  grid: {
+    paddingBottom: 80
+  },
+  libraryList: {
+    flex: 1
+  },
+  thumbContainer: {
+    width: '25%',
+    aspectRatio: 1,
+    padding: 1
+  },
+  thumb: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 8
+  },
+  thumbFallback: {
+    backgroundColor: '#111'
+  },
+  activeOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(255,255,255,0.18)'
+  },
+  multiOverlay: {
+    position: 'absolute',
+    right: 6,
+    top: 6
+  },
+  multiOverlayActive: {},
+  selectionBadge: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: '#2563eb',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5,
+    borderColor: '#fff'
+  },
+  selectionNumber: {
+    color: '#fff',
+    fontSize: 11,
+    fontWeight: '700'
+  },
+  emptyBadge: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    borderWidth: 1.5,
+    borderColor: '#fff',
+    backgroundColor: 'rgba(0,0,0,0.25)'
+  },
+  videoBadge: {
+    position: 'absolute',
+    right: 6,
+    bottom: 6,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 6
+  },
+  videoDuration: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: '600'
+  },
+  videoPlayBadge: {
+    position: 'absolute',
+    left: 6,
+    top: 6,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  videoPlayIcon: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: '700'
+  },
+  previewOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 14,
+    alignItems: 'center'
+  },
+  playPauseCircle: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(0,0,0,0.55)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  playPauseText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: '700'
+  },
+  empty: {
+    padding: 24,
+    alignItems: 'center'
+  },
+  emptyText: {
+    color: '#6b7280'
+  },
+  tabBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingVertical: 10,
+    borderTopWidth: 1,
+    borderTopColor: '#111827'
+  },
+  tab: {
+    color: '#6b7280',
+    fontWeight: '700'
+  },
+  tabActive: {
+    color: '#fff'
+  },
+  cameraContainer: {
+    flex: 1,
+    backgroundColor: '#000'
+  },
+  cameraGridOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'space-between',
+    paddingVertical: 120
+  },
+  gridRow: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  gridRowMiddleRow: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.15)'
+  },
+  gridCell: {
+    flex: 1
+  },
+  gridCellMiddleCol: {
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.15)'
+  },
+  cameraHeader: {
+    position: 'absolute',
+    top: 40,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    zIndex: 10
+  },
+  cameraCloseBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  cameraCloseText: {
+    color: '#fff',
+    fontSize: 20,
+    fontWeight: '300'
+  },
+  cameraFlashContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  cameraHeaderText: {
+    color: '#fff',
+    fontSize: 20
+  },
+  cameraHeaderActiveText: {
+    color: '#FFD700'
+  },
+  cameraFooter: {
+    position: 'absolute',
+    bottom: 80,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 40,
+    zIndex: 10
+  },
+  cameraGalleryPreview: {
+    width: 44,
+    height: 44,
+    borderRadius: 8,
+    borderWidth: 2,
+    borderColor: '#fff',
+    overflow: 'hidden',
+    backgroundColor: '#333'
+  },
+  cameraGalleryThumb: {
+    width: '100%',
+    height: '100%'
+  },
+  cameraGalleryThumbPlaceholder: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#333'
+  },
+  captureRing: {
+    width: 84,
+    height: 84,
+    borderRadius: 42,
+    borderWidth: 4,
+    borderColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent'
+  },
+  captureRingRecording: {
+    borderColor: 'rgba(255, 0, 0, 0.4)'
+  },
+  captureButton: {
+    width: 66,
+    height: 66,
+    borderRadius: 33,
+    backgroundColor: '#fff'
+  },
+  captureButtonRecording: {
+    backgroundColor: '#ef4444',
+    borderRadius: 8,
+    width: 32,
+    height: 32
+  },
+  flipCameraBtn: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  flipCameraText: {
+    color: '#fff',
+    fontSize: 22
+  },
+  cameraModeBar: {
+    position: 'absolute',
+    bottom: 30,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    zIndex: 10
+  },
+  cameraModeScrollContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: '100%',
+    paddingHorizontal: 20
+  },
+  cameraModeTextActive: {
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: 'bold',
+    marginHorizontal: 15,
+    letterSpacing: 1.5
+  },
+  cameraModeTextInactive: {
+    color: 'rgba(255, 255, 255, 0.5)',
+    fontSize: 13,
+    fontWeight: '600',
+    marginHorizontal: 15,
+    letterSpacing: 1.5
+  }
+});
+//# sourceMappingURL=PickScreen.js.map