improved thumb selection flow

src/components/uploadsGalleryModal/children/speakUploaderModal.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useImperativeHandle, useState } from 'react';
 import { useRef } from 'react';
-import { View, Text, TouchableOpacity, Image, TextInput } from 'react-native';
+import { View, Text, TouchableOpacity, Image, Alert, _View } from 'react-native';
 import ActionSheet from 'react-native-actions-sheet';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { Video as VideoType } from 'react-native-image-crop-picker';
@@ -12,17 +12,20 @@ import { uploadFile, uploadVideoInfo } from '../../../providers/speak/speak';
 import { useAppSelector } from '../../../hooks';
 import { useQueryClient } from '@tanstack/react-query';
 import QUERIES from '../../../providers/queries/queryKeys';
+import ImagePicker, { Options } from 'react-native-image-crop-picker';
+import { FlashList } from '@shopify/flash-list';
+import Icon from '../../icon';
 
 
 interface Props {
-  setIsUploading:(flag:boolean)=>void;
-  isUploading:boolean
+  setIsUploading: (flag: boolean) => void;
+  isUploading: boolean
 }
 
 export const SpeakUploaderModal = forwardRef(({
   setIsUploading,
   isUploading
-} : Props, ref) => {
+}: Props, ref) => {
   const sheetModalRef = useRef();
 
   const queryClient = useQueryClient();
@@ -31,22 +34,34 @@ export const SpeakUploaderModal = forwardRef(({
   const pinHash = useAppSelector((state) => state.application.pin);
 
   const [selectedThumb, setSelectedThumb] = useState(null);
+  const [availableThumbs, setAvailableThumbs] = useState([]);
   const [uploadProgress, setUploadProgress] = useState(0);
 
 
   const [selectedVido, setSelectedVideo] = useState<VideoType | null>(null);
 
   useImperativeHandle(ref, () => ({
-    showUploader:async (_video: VideoType) => {
+    showUploader: async (_video: VideoType) => {
       if (sheetModalRef.current) {
-
-        if(_video){
-          const _thumb = await createThumbnail({url: _video.sourceURL})
-          setSelectedVideo(_video);
-          setSelectedThumb(_thumb);
-        }
-        
         sheetModalRef.current.setModalVisible(true);
+
+
+        if (_video) {
+
+          setSelectedVideo(_video);
+          setSelectedThumb(null);
+
+          let thumbs = [];
+          const _diff = _video.duration / 5;
+          for (var i = 0; i < 5; i++) {
+            const _thumb = await createThumbnail({ url: _video.sourceURL, timeStamp: i * _diff })
+            thumbs.push(_thumb);
+          }
+
+          setAvailableThumbs(thumbs);
+        }
+
+
       }
     },
   }));
@@ -87,7 +102,7 @@ export const SpeakUploaderModal = forwardRef(({
 
       queryClient.invalidateQueries([QUERIES.MEDIA.GET_VIDEOS]);
 
-      if(sheetModalRef.current){
+      if (sheetModalRef.current) {
         sheetModalRef.current.setModalVisible(false);
       }
 
@@ -99,9 +114,79 @@ export const SpeakUploaderModal = forwardRef(({
     setIsUploading(false);
   };
 
-  const _onClose = () => {};
 
-  const _renderProgressContent = () => {};
+  const _handleOpenImagePicker = () => {
+
+    const _options: Options = {
+      includeBase64: true,
+      mediaType: 'photo',
+      smartAlbums: ['UserLibrary', 'Favorites', 'PhotoStream', 'Panoramas', 'Bursts'],
+    };
+
+    ImagePicker.openPicker(_options)
+      .then((items) => {
+        if (items && !Array.isArray(items)) {
+          items = [items];
+        }
+        setSelectedThumb(items[0]);
+      })
+      .catch((e) => {
+        Alert.alert("Fail", "Thumb selection failed")
+      });
+  };
+
+  const _onClose = () => { };
+
+  const _renderProgressContent = () => { };
+
+  const _renderThumbSelection = () => {
+
+    const _renderThumb = (uri, onPress) => (
+      <TouchableOpacity onPress={onPress}>
+        <Image source={uri && { uri }} style={styles.thumbnail} />
+      </TouchableOpacity>
+    )
+
+    const _renderThumbItem = ({ item, index }) => {
+      const _onPress = () => {
+        setSelectedThumb(item);
+      }
+      console.log('rendering thumb', item)
+      return _renderThumb(item.path || '', _onPress)
+    }
+
+    const _renderHeader = () => (
+      <View style={styles.selectedThumbContainer}>
+        <>
+          {_renderThumb(selectedThumb?.path || '', _handleOpenImagePicker)}
+          <Icon
+            iconType="MaterialCommunityIcons"
+            style={{ position:'absolute', top:16, left:8 }}
+            name="pencil"
+            color={EStyleSheet.value('$iconColor')}
+            size={20}
+          />
+        </>
+
+        <View style={styles.thumbSeparator} />
+      </View>
+    )
+
+    return (
+      <View style={styles.imageContainer}>
+        <Text style={styles.label}>Select Thumbnail</Text>
+        <FlashList
+          horizontal={true}
+          ListHeaderComponent={_renderHeader}
+          data={availableThumbs.slice()}
+          renderItem={_renderThumbItem}
+          keyExtractor={(item, index) => item.path + index}
+          estimatedItemSize={128}
+        />
+      </View>
+    )
+
+  }
 
   const _renderFormContent = () => {
     return (
@@ -111,8 +196,8 @@ export const SpeakUploaderModal = forwardRef(({
             uri: selectedVido?.sourceURL,
           }}
           repeat={true}
-          onLoad={() => {}}
-          onError={() => {}}
+          onLoad={() => { }}
+          onError={() => { }}
           resizeMode="container"
           fullscreen={false}
           style={styles.mediaPlayer}
@@ -130,12 +215,9 @@ export const SpeakUploaderModal = forwardRef(({
           />
         </View> */}
 
-        <View style={styles.imageContainer}>
-          <Text style={styles.label}>Select Thumbnail</Text>
-          <TouchableOpacity onPress={() => handleImageUpload(2)}>
-            <Image source={selectedThumb && { uri: selectedThumb.path }} style={styles.thumbnail} />
-          </TouchableOpacity>
-        </View>
+        {_renderThumbSelection()}
+
+
 
         <MainButton
           style={styles.uploadButton}

src/components/uploadsGalleryModal/styles/speakUploaderModal.styles.ts

@@ -23,14 +23,20 @@ export default EStyleSheet.create({
     paddingBottom: 40,
   },
   imageContainer: {
+    paddingHorizontal:16,
     marginVertical: 20,
   },
+  selectedThumbContainer: {
+    flexDirection: 'row'
+  },
+  thumbSeparator: { width: 6, marginTop: 12, marginRight: 12, flex: 1, borderRadius: 8, backgroundColor: '$iconColor' },
   thumbnail: {
     marginTop: 10,
-    width: 177,
-    height: 100,
+    width: 128,
+    height: 72,
     resizeMode: 'cover',
     borderRadius: 8,
+    marginRight: 12,
     backgroundColor: '$primaryLightBackground',
   },
   label: {