@technotoil/image-video-editor 0.1.5 → 0.1.6

package/lib/module/screens/PickScreen.js

@@ -80,6 +80,12 @@ export function PickScreen({
   const [albums, setAlbums] = useState([]);
   const [loading, setLoading] = useState(false);
   const [previewUri, setPreviewUri] = useState(null);
+  // Track if user has scrolled past the main preview
+  const [isScrolledPast, setIsScrolledPast] = useState(false);
+  // Only show overlay when user explicitly clicks media while scrolled past preview
+  const [showOverlay, setShowOverlay] = useState(false);
+  const flatListRef = useRef(null);
+  const PREVIEW_HEIGHT = Dimensions.get('window').width;
 
   // Aspect ratio logic
   const isRatioLocked = aspectRatio !== 'free';
@@ -95,6 +101,7 @@ export function PickScreen({
   const [cropMode, setCropMode] = useState(isRatioLocked ? '1:1' : '1:1');
   const [videoPaused, setVideoPaused] = useState(false);
   const scaleAnim = useRef(new Animated.Value(1)).current;
+  const overlayAnim = useRef(new Animated.Value(0)).current;
   const [showCustomCamera, setShowCustomCamera] = useState(false);
   const [facing, setFacing] = useState('front');
   const [flashMode, setFlashMode] = useState('off');
@@ -237,6 +244,15 @@ export function PickScreen({
       type: 'albumRow'
     }, ...rows];
   }, [filtered]);
+
+  // Show/hide floating overlay with animation
+  useEffect(() => {
+    Animated.timing(overlayAnim, {
+      toValue: showOverlay ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  }, [showOverlay]);
   useEffect(() => {
     let cancelled = false;
     setVideoPaused(false);
@@ -292,6 +308,11 @@ export function PickScreen({
     } else {
       setSelectedMedia(item);
     }
+
+    // Show floating overlay only if user is already scrolled past the main preview
+    if (isScrolledPast) {
+      setShowOverlay(true);
+    }
     Animated.sequence([Animated.timing(scaleAnim, {
       toValue: 0.97,
       duration: 80,
@@ -508,192 +529,268 @@ export function PickScreen({
           }, album.id))
         })]
       })]
-    }), /*#__PURE__*/_jsx(FlatList, {
-      data: listData,
-      extraData: {
-        selectedMedia,
-        previewUri,
-        playableUri,
-        videoPaused,
-        cropMode,
-        isRatioLocked,
-        activeAlbum,
-        multiSelect,
-        selectedItems,
-        showAlbumPicker,
-        loading
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        position: 'relative'
       },
-      keyExtractor: item => item.id,
-      stickyHeaderIndices: [1],
-      style: styles.libraryList,
-      contentContainerStyle: styles.grid,
-      getItemLayout: (data, index) => {
-        const previewHeight = isRatioLocked && previewAspectRatio ? Dimensions.get('window').width / previewAspectRatio : 420;
-        const albumRowHeight = 48;
-        const rowHeight = 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__*/_jsx(View, {
-        style: styles.empty,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.emptyText,
-          children: loading ? 'Loading…' : 'No media found'
-        })
-      }),
-      renderItem: ({
-        item
-      }) => {
-        if (item.type === 'preview') {
-          const previewStyleHeight = isRatioLocked && previewAspectRatio ? Dimensions.get('window').width / previewAspectRatio : 420;
-          return /*#__PURE__*/_jsxs(Animated.View, {
-            style: [styles.preview, {
-              transform: [{
-                scale: scaleAnim
+      children: [/*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.floatingOverlay, {
+          opacity: overlayAnim,
+          transform: [{
+            translateY: overlayAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [-PREVIEW_HEIGHT, 0]
+            })
+          }]
+        }],
+        pointerEvents: isScrolledPast ? 'box-none' : 'none',
+        children: [selectedMedia?.type === 'video' ? /*#__PURE__*/_jsxs(Pressable, {
+          style: styles.previewImage,
+          onPress: () => setVideoPaused(v => !v),
+          children: [playableUri && isActive ? /*#__PURE__*/_jsx(VideoPreview, {
+            uri: playableUri,
+            paused: videoPaused || !isActive,
+            muted: false,
+            style: styles.previewImage,
+            resizeMode: "cover"
+          }) : /*#__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: isRatioLocked ? 'cover' : cropMode === '1:1' ? 'cover' : 'contain'
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.previewControls,
+          children: [isRatioLocked && /*#__PURE__*/_jsx(View, {
+            style: styles.ratioBadge,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.ratioBadgeText,
+              children: aspectRatio
+            })
+          }), !isRatioLocked && /*#__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__*/_jsx(FlatList, {
+        ref: flatListRef,
+        data: listData,
+        extraData: {
+          selectedMedia,
+          previewUri,
+          playableUri,
+          videoPaused,
+          cropMode,
+          isRatioLocked,
+          activeAlbum,
+          multiSelect,
+          selectedItems,
+          showAlbumPicker,
+          loading
+        },
+        keyExtractor: item => item.id,
+        stickyHeaderIndices: [1],
+        style: styles.libraryList,
+        contentContainerStyle: styles.grid,
+        onScroll: e => {
+          const scrollY = e.nativeEvent.contentOffset.y;
+          const scrolledPast = scrollY > PREVIEW_HEIGHT - 10;
+          setIsScrolledPast(scrolledPast);
+          // When user scrolls back up to see main preview, hide the overlay
+          if (!scrolledPast) {
+            setShowOverlay(false);
+          }
+        },
+        scrollEventThrottle: 16,
+        getItemLayout: (data, index) => {
+          const albumRowHeight = 48;
+          const rowHeight = Dimensions.get('window').width / 4;
+          if (index === 0) return {
+            length: PREVIEW_HEIGHT,
+            offset: 0,
+            index
+          };
+          if (index === 1) return {
+            length: albumRowHeight,
+            offset: PREVIEW_HEIGHT,
+            index
+          };
+          const offset = PREVIEW_HEIGHT + albumRowHeight + (index - 2) * rowHeight;
+          return {
+            length: rowHeight,
+            offset,
+            index
+          };
+        },
+        removeClippedSubviews: false,
+        windowSize: 11,
+        ListEmptyComponent: /*#__PURE__*/_jsx(View, {
+          style: styles.empty,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.emptyText,
+            children: loading ? 'Loading…' : 'No media found'
+          })
+        }),
+        renderItem: ({
+          item
+        }) => {
+          if (item.type === 'preview') {
+            return /*#__PURE__*/_jsxs(Animated.View, {
+              style: [styles.preview, {
+                transform: [{
+                  scale: scaleAnim
+                }],
+                height: PREVIEW_HEIGHT
               }],
-              height: previewStyleHeight
-            }],
-            children: [selectedMedia?.type === 'video' ? /*#__PURE__*/_jsxs(Pressable, {
-              style: styles.previewImage,
-              onPress: () => setVideoPaused(v => !v),
-              children: [playableUri && isActive ? /*#__PURE__*/_jsx(VideoPreview, {
-                uri: playableUri,
-                paused: videoPaused || !isActive,
-                muted: false,
+              children: [selectedMedia?.type === 'video' ? /*#__PURE__*/_jsxs(Pressable, {
                 style: styles.previewImage,
-                resizeMode: "cover"
+                onPress: () => setVideoPaused(v => !v),
+                children: [playableUri && isActive ? /*#__PURE__*/_jsx(VideoPreview, {
+                  uri: playableUri,
+                  paused: videoPaused || !isActive,
+                  muted: false,
+                  style: styles.previewImage,
+                  resizeMode: "cover"
+                }) : /*#__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: selectedMedia.thumbnailUri || selectedMedia.uri
+                  uri: previewUri ?? selectedMedia?.uri
                 },
-                style: styles.previewImage,
-                resizeMode: "cover"
-              }), /*#__PURE__*/_jsx(View, {
-                style: styles.previewOverlay,
-                children: /*#__PURE__*/_jsx(View, {
-                  style: styles.playPauseCircle,
+                style: [styles.previewImage, cropMode === '1:1' ? styles.squareCrop : styles.originalCrop],
+                resizeMode: isRatioLocked ? 'cover' : cropMode === '1:1' ? 'cover' : 'contain'
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.previewControls,
+                children: [isRatioLocked && /*#__PURE__*/_jsx(View, {
+                  style: styles.ratioBadge,
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: styles.ratioBadgeText,
+                    children: aspectRatio
+                  })
+                }), !isRatioLocked && /*#__PURE__*/_jsx(Pressable, {
+                  style: styles.cropToggle,
+                  onPress: () => setCropMode(v => v === '1:1' ? 'original' : '1:1'),
                   children: /*#__PURE__*/_jsx(Ionicons, {
-                    name: videoPaused ? 'play' : 'pause',
-                    size: 24,
+                    name: cropMode === '1:1' ? 'square-outline' : 'expand-outline',
+                    size: 20,
                     color: "#fff"
                   })
-                })
+                })]
               })]
-            }) : /*#__PURE__*/_jsx(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__*/_jsxs(View, {
-              style: styles.previewControls,
-              children: [isRatioLocked && /*#__PURE__*/_jsx(View, {
-                style: styles.ratioBadge,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.ratioBadgeText,
-                  children: aspectRatio
-                })
-              }), !isRatioLocked && /*#__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"
-                })
-              })]
-            })]
-          });
-        }
-        if (item.type === 'albumRow') {
-          return /*#__PURE__*/_jsxs(View, {
-            style: [styles.albumRow, {
-              backgroundColor: '#0b0f1a',
-              zIndex: 999,
-              elevation: 5
-            }],
-            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
-                }
-              })]
-            }), maxSelection > 1 && /*#__PURE__*/_jsxs(View, {
-              style: {
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8
-              },
-              children: [multiSelect && /*#__PURE__*/_jsxs(Text, {
-                style: {
-                  color: '#3b82f6',
-                  fontSize: 12,
-                  fontWeight: '700'
-                },
-                children: [selectedItems.length, "/", maxSelection]
-              }), /*#__PURE__*/_jsx(Pressable, {
-                style: [styles.multiSelectBtn, multiSelect && styles.multiSelectBtnActive, multiSelect && selectedItems.length === 0 && {
-                  opacity: 0.35
-                }],
-                onPress: () => {
-                  if (multiSelect) {
-                    handleNext();
-                  } else {
-                    toggleMultiSelect();
+            });
+          }
+          if (item.type === 'albumRow') {
+            return /*#__PURE__*/_jsxs(View, {
+              style: [styles.albumRow, {
+                backgroundColor: '#0b0f1a',
+                zIndex: 999,
+                elevation: 5
+              }],
+              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
                   }
+                })]
+              }), maxSelection > 1 && /*#__PURE__*/_jsxs(View, {
+                style: {
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 8
                 },
-                disabled: multiSelect && selectedItems.length === 0,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: [styles.multiSelectText, multiSelect && styles.multiSelectTextActive],
-                  children: multiSelect ? 'Done' : 'Select multiple'
-                })
+                children: [multiSelect && /*#__PURE__*/_jsxs(Text, {
+                  style: {
+                    color: '#3b82f6',
+                    fontSize: 12,
+                    fontWeight: '700'
+                  },
+                  children: [selectedItems.length, "/", maxSelection]
+                }), /*#__PURE__*/_jsx(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__*/_jsx(Text, {
+                    style: [styles.multiSelectText, multiSelect && styles.multiSelectTextActive],
+                    children: multiSelect ? 'Done' : 'Select multiple'
+                  })
+                })]
               })]
-            })]
+            });
+          }
+          return /*#__PURE__*/_jsx(View, {
+            style: {
+              flexDirection: 'row'
+            },
+            children: item.items.map(mediaItem => renderThumb({
+              item: mediaItem
+            }))
           });
         }
-        return /*#__PURE__*/_jsx(View, {
-          style: {
-            flexDirection: 'row'
-          },
-          children: item.items.map(mediaItem => renderThumb({
-            item: mediaItem
-          }))
-        });
-      }
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.tabBar,
-      children: mediaTabs.filter(t => mediaType === 'any' || mediaType === 'photo' && t !== 'VIDEO' || mediaType === 'video' && t !== 'PHOTO').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, {
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.tabBar,
+        children: mediaTabs.filter(t => mediaType === 'any' || mediaType === 'photo' && t !== 'VIDEO' || mediaType === 'video' && t !== 'PHOTO').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,
@@ -931,10 +1028,21 @@ const styles = StyleSheet.create({
   },
   preview: {
     width: '100%',
-    height: 420,
     backgroundColor: '#0f172a',
     overflow: 'hidden'
   },
+  floatingOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+    elevation: 20,
+    backgroundColor: '#0f172a',
+    overflow: 'hidden',
+    width: '100%',
+    height: Dimensions.get('window').width
+  },
   previewImage: {
     width: '100%',
     height: '100%',