From 61271e25897ad867709a116d223855bf251f4593 Mon Sep 17 00:00:00 2001
From: noumantahir <nouman.hawkdev@gmail.com>
Date: Fri, 17 Nov 2023 16:23:00 +0500
Subject: [PATCH] first video selection to upload simple post

---
 .../children/speakUploaderModal.tsx           | 33 ++++++++--
 .../container/uploadsGalleryModal.tsx         | 60 +++++++++++--------
 src/providers/speak/speak.ts                  |  5 +-
 3 files changed, 67 insertions(+), 31 deletions(-)

diff --git a/src/components/uploadsGalleryModal/children/speakUploaderModal.tsx b/src/components/uploadsGalleryModal/children/speakUploaderModal.tsx
index 530f05a80..522a460e7 100644
--- a/src/components/uploadsGalleryModal/children/speakUploaderModal.tsx
+++ b/src/components/uploadsGalleryModal/children/speakUploaderModal.tsx
@@ -5,6 +5,8 @@ import ActionSheet from 'react-native-actions-sheet';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import styles from '../styles/speakUploaderModal.styles';
 import { MainButton } from '../../mainButton';
+import { Video } from 'react-native-image-crop-picker';
+import { uploadVideo } from '../../../providers/speak/speak';
 
 export const SpeakUploaderModal = forwardRef(({}, ref) => {
   const sheetModalRef = useRef();
@@ -14,16 +16,39 @@ export const SpeakUploaderModal = forwardRef(({}, ref) => {
   const [title, setTitle] = useState('');
   const [isUploading, setIsUploading] = useState(false);
 
+  const [selectedVido, setSelectedVideo] = useState<Video|null>(null);
+
   useImperativeHandle(ref, () => ({
-    showUploader: () => {
+    showUploader: (_video:Video) => {
       if (sheetModalRef.current) {
+        setSelectedVideo(_video);
         sheetModalRef.current.setModalVisible(true);
       }
     },
   }));
 
+  const _startUpload = async () => {
+
+    if(!selectedVido){
+      return
+    }
+
+    try{
+      const response = await uploadVideo(selectedVido, (progress) => {
+        console.log("Upload progress", progress)
+      })
+
+      console.log("uploda video response", response);
+    } catch(err){
+      console.warn("Video upload failed", err)
+    }
+    
+  }
+
+
   const _onClose = () => {};
 
+
   const _renderProgressContent = () => {};
 
   const _renderFormContent = () => {
@@ -39,7 +64,7 @@ export const SpeakUploaderModal = forwardRef(({}, ref) => {
       <View style={styles.contentContainer}>
         <View style={styles.titleBox}>
           <Text style={styles.label}>Selection</Text>
-          <TextInput style={styles.titleInput} editable={false} value="Revoling World .mp4" />
+          <TextInput style={styles.titleInput} editable={false} value={selectedVido?.filename} />
         </View>
 
         <View style={styles.titleBox}>
@@ -62,9 +87,7 @@ export const SpeakUploaderModal = forwardRef(({}, ref) => {
 
         <MainButton
           style={styles.uploadButton}
-          onPress={() => {
-            /* Handle upload */
-          }}
+          onPress={_startUpload}
           text="START UPLOAD"
           isLoading={isUploading}
         />
diff --git a/src/components/uploadsGalleryModal/container/uploadsGalleryModal.tsx b/src/components/uploadsGalleryModal/container/uploadsGalleryModal.tsx
index 14da00cbd..a27802f58 100644
--- a/src/components/uploadsGalleryModal/container/uploadsGalleryModal.tsx
+++ b/src/components/uploadsGalleryModal/container/uploadsGalleryModal.tsx
@@ -173,30 +173,30 @@ export const UploadsGalleryModal = forwardRef(
     }, [postBody, showModal, mode]);
 
     const _handleOpenImagePicker = (addToUploads?: boolean) => {
-      const _options: Options =
-        mode === Modes.MODE_IMAGE
-          ? {
-              includeBase64: true,
-              multiple: allowMultiple || true,
-              mediaType: 'photo',
-              smartAlbums: ['UserLibrary', 'Favorites', 'PhotoStream', 'Panoramas', 'Bursts'],
-            }
-          : {
-              mediaType: 'video',
-              smartAlbums: ['UserLibrary', 'Favorites', 'Videos'],
-            };
+      const _vidMode = mode === Modes.MODE_VIDEO
+      const _options: Options = _vidMode ?
+        {
+          mediaType: 'video',
+          smartAlbums: ['UserLibrary', 'Favorites', 'Videos'],
+        } : {
+          includeBase64: true,
+          multiple: allowMultiple || true,
+          mediaType: 'photo',
+          smartAlbums: ['UserLibrary', 'Favorites', 'PhotoStream', 'Panoramas', 'Bursts'],
+        }
 
-      if (Modes.MODE_VIDEO) {
-        _handleVideoSelection();
-        return;
-      }
 
       ImagePicker.openPicker(_options)
         .then((items) => {
           if (items && !Array.isArray(items)) {
             items = [items];
           }
-          _handleMediaOnSelected(items, !addToUploads);
+          if (_vidMode) {
+            _handleVideoSelection(items[0]);
+          } else {
+            _handleMediaOnSelected(items, !addToUploads);
+          }
+
         })
         .catch((e) => {
           _handleMediaOnSelectFailure(e);
@@ -204,12 +204,24 @@ export const UploadsGalleryModal = forwardRef(
     };
 
     const _handleOpenCamera = () => {
-      ImagePicker.openCamera({
-        includeBase64: true,
-        mediaType: 'photo',
-      })
-        .then((image) => {
-          _handleMediaOnSelected([image], true);
+
+      const _vidMode = mode === Modes.MODE_VIDEO
+      const _options: Options = _vidMode ?
+        {
+          mediaType: 'video',
+        } : {
+          includeBase64: true,
+          mediaType: 'photo',
+        };
+
+      ImagePicker.openCamera(_options)
+        .then((media) => {
+          if(_vidMode){
+            _handleVideoSelection(media);
+          }else {
+            _handleMediaOnSelected([media], true);
+          }
+          
         })
         .catch((e) => {
           _handleMediaOnSelectFailure(e);
@@ -362,7 +374,7 @@ export const UploadsGalleryModal = forwardRef(
     const _handleVideoSelection = (video: Video) => {
       // show video upload modal,
       // allow thumbnail selection and uplaods
-      speakUploaderRef.current.showUploader();
+      speakUploaderRef.current.showUploader(video);
     };
 
     const _handleMediaOnSelectFailure = (error) => {
diff --git a/src/providers/speak/speak.ts b/src/providers/speak/speak.ts
index 1c47a9c66..b4ac4156e 100644
--- a/src/providers/speak/speak.ts
+++ b/src/providers/speak/speak.ts
@@ -5,6 +5,7 @@ import { ThreeSpeakVideo } from './speak.types';
 import { decryptKey } from '../../utils/crypto';
 import { convertVideoUpload } from './converters';
 import { BASE_URL_SPEAK_STUDIO, PATH_API, PATH_LOGIN, PATH_MOBILE } from './constants';
+import { Video } from 'react-native-image-crop-picker';
 
 const tusEndPoint = 'https://uploads.3speak.tv/files/';
 
@@ -144,12 +145,12 @@ export const markAsPublished = async (currentAccount: any, pinHash: string, vide
     });
 };
 
-export const uploadVideo = async (media, onUploadProgress) => {
+export const uploadVideo = async (media:Video, onUploadProgress) => {
   try {
     const file = {
       uri: media.path,
       type: media.mime,
-      name: media.filename || `img_${Math.random()}.mp4`,
+      name: media.filename || `vid_${Math.random()}.mp4`,
       size: media.size,
     };