first video selection to upload simple post

This commit is contained in:
noumantahir 2023-11-17 16:23:00 +05:00
parent 9a2f4f7c07
commit 61271e2589
3 changed files with 67 additions and 31 deletions

View File

@ -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}
/>

View File

@ -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) => {

View File

@ -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,
};