@technotoil/image-video-editor 0.1.1 → 0.1.3

package/lib/commonjs/screens/PickScreen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PickScreen = PickScreen;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _Ionicons = _interopRequireDefault(require("react-native-vector-icons/Ionicons"));
+var _Icon = require("../components/Icon");
 var _reactNativeImageCropPicker = _interopRequireDefault(require("react-native-image-crop-picker"));
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _CameraView = require("../native/CameraView");
@@ -56,6 +56,7 @@ function formatDuration(ms) {
   return `${m}:${s.toString().padStart(2, '0')}`;
 }
 function PickScreen({
+  isActive = true,
   items,
   onPicked,
   onNext,
@@ -66,10 +67,12 @@ function PickScreen({
   onCameraModeChange,
   defaultCameraMode,
   maxSelection = 1,
-  aspectRatio = 'free'
+  aspectRatio = 'free',
+  mediaType = 'any',
+  mediaTabs = ['GALLERY', 'PHOTO', 'VIDEO']
 }) {
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  const [tab, setTab] = (0, _react.useState)('GALLERY');
+  const [tab, setTab] = (0, _react.useState)(mediaTabs[0] || 'GALLERY');
   const [activeAlbum, setActiveAlbum] = (0, _react.useState)({
     id: 'all',
     title: 'Recents'
@@ -173,27 +176,32 @@ function PickScreen({
   };
   const loadMedia = async albumId => {
     try {
+      console.log('loadMedia called with albumId:', albumId);
       setLoading(true);
       const assets = await (0, _MediaLibrary.listMedia)({
         limit: 200,
         offset: 0,
-        type: 'all',
+        type: mediaType === 'photo' ? 'image' : mediaType === 'video' ? 'video' : 'all',
         albumId: albumId === 'all' ? undefined : albumId
       });
+      console.log('loadMedia got assets:', assets.length);
       setLibrary(assets);
       if (assets[0] && !multiSelect) {
         setSelectedMedia(assets[0]);
       }
     } catch (err) {
+      console.error('loadMedia error:', err);
       _reactNative.Alert.alert('Library error', err?.message ?? 'Failed to load library.');
     } finally {
       setLoading(false);
     }
   };
   (0, _react.useEffect)(() => {
+    console.log('PickScreen mounted!');
     (async () => {
       try {
         const ok = await (0, _MediaLibrary.requestMediaAccess)();
+        console.log('requestMediaAccess ok?', ok);
         if (!ok) {
           _reactNative.Alert.alert('Permission needed', 'Allow photo access to continue.');
           return;
@@ -219,6 +227,22 @@ function PickScreen({
     };
     return [cameraItem, ...list];
   }, [library, tab]);
+  const listData = (0, _react.useMemo)(() => {
+    const rows = Array.from({
+      length: Math.ceil(filtered.length / 4)
+    }).map((_, i) => ({
+      id: `row_${i}`,
+      type: 'row',
+      items: filtered.slice(i * 4, i * 4 + 4)
+    }));
+    return [{
+      id: 'header_preview',
+      type: 'preview'
+    }, {
+      id: 'header_albumRow',
+      type: 'albumRow'
+    }, ...rows];
+  }, [filtered]);
   (0, _react.useEffect)(() => {
     let cancelled = false;
     setVideoPaused(false);
@@ -231,6 +255,7 @@ function PickScreen({
         setPreviewUri(selectedMedia.uri);
         return;
       }
+      setPreviewUri(null);
       try {
         const fileUri = await (0, _MediaLibrary.exportAsset)(selectedMedia.id);
         if (!cancelled) setPreviewUri(fileUri);
@@ -244,23 +269,34 @@ function PickScreen({
   }, [selectedMedia]);
   const playableUri = (0, _react.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;
+    if (previewUri) return previewUri;
+    return selectedMedia.uri;
   }, [previewUri, selectedMedia]);
   const toggleMultiSelect = () => {
-    setMultiSelect(v => !v);
-    setSelectedItems([]);
+    setMultiSelect(v => {
+      if (!v && selectedMedia) {
+        setSelectedItems([selectedMedia]);
+      } else {
+        setSelectedItems([]);
+      }
+      return !v;
+    });
   };
   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 (exists) {
+          const newItems = prev.filter(i => i.id !== item.id);
+          setSelectedMedia(newItems.length > 0 ? newItems[newItems.length - 1] : null);
+          return newItems;
+        }
         if (prev.length >= maxSelection) return prev;
+        setSelectedMedia(item);
         return [...prev, item];
       });
+    } else {
+      setSelectedMedia(item);
     }
     _reactNative.Animated.sequence([_reactNative.Animated.timing(scaleAnim, {
       toValue: 0.97,
@@ -400,7 +436,7 @@ function PickScreen({
       }), item.type === 'video' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.videoPlayBadge,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             name: "play",
             size: 10,
             color: "#fff"
@@ -427,7 +463,7 @@ function PickScreen({
             onNext([]);
           }
         },
-        children: customCancelIcon ? customCancelIcon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+        children: customCancelIcon ? customCancelIcon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           name: "close",
           size: 22,
           color: "#fff"
@@ -470,7 +506,7 @@ function PickScreen({
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.albumSheetOptionText, activeAlbum.id === album.id && styles.albumSheetOptionActive],
               children: album.title
-            }), activeAlbum.id === album.id && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+            }), activeAlbum.id === album.id && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
               name: "checkmark",
               size: 20,
               color: "#3b82f6"
@@ -478,129 +514,185 @@ function PickScreen({
           }, album.id))
         })]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-      style: [styles.preview, {
-        transform: [{
-          scale: scaleAnim
-        }]
-      }, isRatioLocked && previewAspectRatio ? {
-        height: undefined,
-        aspectRatio: previewAspectRatio
-      } : {}],
-      children: [selectedMedia?.type === 'video' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-        style: styles.previewImage,
-        onPress: () => setVideoPaused(v => !v),
-        children: [playableUri ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPreview.VideoPreview, {
-          uri: playableUri,
-          paused: videoPaused,
-          muted: false,
-          style: styles.previewImage,
-          resizeMode: "cover"
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-          source: {
-            uri: selectedMedia.thumbnailUri || selectedMedia.uri
-          },
-          style: styles.previewImage,
-          resizeMode: "cover"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.previewOverlay,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.playPauseCircle,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-              name: videoPaused ? 'play' : 'pause',
-              size: 24,
-              color: "#fff"
-            })
-          })
-        })]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-        source: {
-          uri: previewUri ?? selectedMedia?.uri
-        },
-        style: [styles.previewImage, cropMode === '1:1' ? styles.squareCrop : styles.originalCrop],
-        resizeMode: isRatioLocked ? 'cover' : cropMode === '1:1' ? 'cover' : 'contain'
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.previewControls,
-        children: [isRatioLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.ratioBadge,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.ratioBadgeText,
-            children: aspectRatio
-          })
-        }), !isRatioLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-          style: styles.cropToggle,
-          onPress: () => setCropMode(v => v === '1:1' ? 'original' : '1:1'),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            name: cropMode === '1:1' ? 'square-outline' : 'expand-outline',
-            size: 20,
-            color: "#fff"
-          })
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.albumRow,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-        style: styles.albumSelector,
-        onPress: () => setShowAlbumPicker(v => !v),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.albumTitle,
-          children: activeAlbum.title
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-          name: "chevron-down",
-          size: 16,
-          color: "#fff",
-          style: {
-            marginLeft: 6
-          }
-        })]
-      }), maxSelection > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 8
-        },
-        children: [multiSelect && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: {
-            color: '#3b82f6',
-            fontSize: 12,
-            fontWeight: '700'
-          },
-          children: [selectedItems.length, "/", maxSelection]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-          style: [styles.multiSelectBtn, multiSelect && styles.multiSelectBtnActive, multiSelect && selectedItems.length === 0 && {
-            opacity: 0.35
-          }],
-          onPress: () => {
-            if (multiSelect) {
-              handleNext();
-            } else {
-              toggleMultiSelect();
-            }
-          },
-          disabled: multiSelect && selectedItems.length === 0,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.multiSelectText, multiSelect && styles.multiSelectTextActive],
-            children: multiSelect ? 'Done' : 'Select'
-          })
-        })]
-      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-      data: filtered,
+      data: listData,
+      extraData: {
+        selectedMedia,
+        previewUri,
+        playableUri,
+        videoPaused,
+        cropMode,
+        isRatioLocked,
+        activeAlbum,
+        multiSelect,
+        selectedItems,
+        showAlbumPicker,
+        loading
+      },
       keyExtractor: item => item.id,
-      numColumns: 4,
+      stickyHeaderIndices: [1],
       style: styles.libraryList,
-      renderItem: renderThumb,
       contentContainerStyle: styles.grid,
+      getItemLayout: (data, index) => {
+        const previewHeight = isRatioLocked && previewAspectRatio ? _reactNative.Dimensions.get('window').width / previewAspectRatio : 420;
+        const albumRowHeight = 48;
+        const rowHeight = _reactNative.Dimensions.get('window').width / 4;
+        if (index === 0) return {
+          length: previewHeight,
+          offset: 0,
+          index
+        };
+        if (index === 1) return {
+          length: albumRowHeight,
+          offset: previewHeight,
+          index
+        };
+        const offset = previewHeight + albumRowHeight + (index - 2) * rowHeight;
+        return {
+          length: rowHeight,
+          offset,
+          index
+        };
+      },
+      removeClippedSubviews: false,
+      windowSize: 11,
       ListEmptyComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.empty,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.emptyText,
           children: loading ? 'Loading…' : 'No media found'
         })
-      })
+      }),
+      renderItem: ({
+        item
+      }) => {
+        if (item.type === 'preview') {
+          const previewStyleHeight = isRatioLocked && previewAspectRatio ? _reactNative.Dimensions.get('window').width / previewAspectRatio : 420;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+            style: [styles.preview, {
+              transform: [{
+                scale: scaleAnim
+              }],
+              height: previewStyleHeight
+            }],
+            children: [selectedMedia?.type === 'video' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+              style: styles.previewImage,
+              onPress: () => setVideoPaused(v => !v),
+              children: [playableUri && isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPreview.VideoPreview, {
+                uri: playableUri,
+                paused: videoPaused || !isActive,
+                muted: false,
+                style: styles.previewImage,
+                resizeMode: "cover"
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                source: {
+                  uri: selectedMedia.thumbnailUri || selectedMedia.uri
+                },
+                style: styles.previewImage,
+                resizeMode: "cover"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.previewOverlay,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.playPauseCircle,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+                    name: videoPaused ? 'play' : 'pause',
+                    size: 24,
+                    color: "#fff"
+                  })
+                })
+              })]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+              source: {
+                uri: previewUri ?? selectedMedia?.uri
+              },
+              style: [styles.previewImage, cropMode === '1:1' ? styles.squareCrop : styles.originalCrop],
+              resizeMode: isRatioLocked ? 'cover' : cropMode === '1:1' ? 'cover' : 'contain'
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.previewControls,
+              children: [isRatioLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.ratioBadge,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.ratioBadgeText,
+                  children: aspectRatio
+                })
+              }), !isRatioLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+                style: styles.cropToggle,
+                onPress: () => setCropMode(v => v === '1:1' ? 'original' : '1:1'),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+                  name: cropMode === '1:1' ? 'square-outline' : 'expand-outline',
+                  size: 20,
+                  color: "#fff"
+                })
+              })]
+            })]
+          });
+        }
+        if (item.type === 'albumRow') {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [styles.albumRow, {
+              backgroundColor: '#0b0f1a',
+              zIndex: 999,
+              elevation: 5
+            }],
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+              style: styles.albumSelector,
+              onPress: () => setShowAlbumPicker(v => !v),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.albumTitle,
+                children: activeAlbum.title
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+                name: "chevron-down",
+                size: 16,
+                color: "#fff",
+                style: {
+                  marginLeft: 6
+                }
+              })]
+            }), maxSelection > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8
+              },
+              children: [multiSelect && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                style: {
+                  color: '#3b82f6',
+                  fontSize: 12,
+                  fontWeight: '700'
+                },
+                children: [selectedItems.length, "/", maxSelection]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+                style: [styles.multiSelectBtn, multiSelect && styles.multiSelectBtnActive, multiSelect && selectedItems.length === 0 && {
+                  opacity: 0.35
+                }],
+                onPress: () => {
+                  if (multiSelect) {
+                    handleNext();
+                  } else {
+                    toggleMultiSelect();
+                  }
+                },
+                disabled: multiSelect && selectedItems.length === 0,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.multiSelectText, multiSelect && styles.multiSelectTextActive],
+                  children: multiSelect ? 'Done' : 'Select multiple'
+                })
+              })]
+            })]
+          });
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flexDirection: 'row'
+          },
+          children: item.items.map(mediaItem => renderThumb({
+            item: mediaItem
+          }))
+        });
+      }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.tabBar,
-      children: TABS.map(t => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      children: mediaTabs.filter(t => mediaType === 'any' || mediaType === 'photo' && t !== 'VIDEO' || mediaType === 'video' && t !== 'PHOTO').map(t => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         onPress: () => setTab(t),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.tab, tab === t && styles.tabActive],
@@ -657,7 +749,7 @@ function PickScreen({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
             style: styles.cameraCloseBtn,
             onPress: () => setShowCustomCamera(false),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
               name: "close",
               size: 22,
               color: "#fff"
@@ -668,7 +760,7 @@ function PickScreen({
             }],
             onPress: () => setFlashMode(f => f === 'on' ? 'off' : 'on'),
             disabled: facing === 'front',
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
               name: flashMode === 'on' && facing === 'back' ? 'flash' : 'flash-off',
               size: 22,
               color: flashMode === 'on' && facing === 'back' ? '#FFD700' : 'rgba(255,255,255,0.4)'
@@ -700,7 +792,7 @@ function PickScreen({
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
             style: styles.flipCameraBtn,
             onPress: () => setFacing(f => f === 'front' ? 'back' : 'front'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
               name: "camera-reverse-outline",
               size: 26,
               color: "#fff"
@@ -900,7 +992,7 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: 16,
-    paddingVertical: 10
+    height: 48
   },
   albumSelector: {
     flexDirection: 'row',