@technotoil/image-video-editor 0.1.1 → 0.1.2

package/lib/commonjs/screens/PickScreen.js

@@ -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,
@@ -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)(_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"
+                })
+              })]
+            })]
+          });
+        }
+        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)(_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 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],
@@ -900,7 +992,7 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: 16,
-    paddingVertical: 10
+    height: 48
   },
   albumSelector: {
     flexDirection: 'row',