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 EStyleSheet from 'react-native-extended-stylesheet';
import styles from '../styles/speakUploaderModal.styles'; import styles from '../styles/speakUploaderModal.styles';
import { MainButton } from '../../mainButton'; import { MainButton } from '../../mainButton';
import { Video } from 'react-native-image-crop-picker';
import { uploadVideo } from '../../../providers/speak/speak';
export const SpeakUploaderModal = forwardRef(({}, ref) => { export const SpeakUploaderModal = forwardRef(({}, ref) => {
const sheetModalRef = useRef(); const sheetModalRef = useRef();
@ -14,16 +16,39 @@ export const SpeakUploaderModal = forwardRef(({}, ref) => {
const [title, setTitle] = useState(''); const [title, setTitle] = useState('');
const [isUploading, setIsUploading] = useState(false); const [isUploading, setIsUploading] = useState(false);
const [selectedVido, setSelectedVideo] = useState<Video|null>(null);
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
showUploader: () => { showUploader: (_video:Video) => {
if (sheetModalRef.current) { if (sheetModalRef.current) {
setSelectedVideo(_video);
sheetModalRef.current.setModalVisible(true); 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 _onClose = () => {};
const _renderProgressContent = () => {}; const _renderProgressContent = () => {};
const _renderFormContent = () => { const _renderFormContent = () => {
@ -39,7 +64,7 @@ export const SpeakUploaderModal = forwardRef(({}, ref) => {
<View style={styles.contentContainer}> <View style={styles.contentContainer}>
<View style={styles.titleBox}> <View style={styles.titleBox}>
<Text style={styles.label}>Selection</Text> <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>
<View style={styles.titleBox}> <View style={styles.titleBox}>
@ -62,9 +87,7 @@ export const SpeakUploaderModal = forwardRef(({}, ref) => {
<MainButton <MainButton
style={styles.uploadButton} style={styles.uploadButton}
onPress={() => { onPress={_startUpload}
/* Handle upload */
}}
text="START UPLOAD" text="START UPLOAD"
isLoading={isUploading} isLoading={isUploading}
/> />

View File

@ -173,30 +173,30 @@ export const UploadsGalleryModal = forwardRef(
}, [postBody, showModal, mode]); }, [postBody, showModal, mode]);
const _handleOpenImagePicker = (addToUploads?: boolean) => { const _handleOpenImagePicker = (addToUploads?: boolean) => {
const _options: Options = const _vidMode = mode === Modes.MODE_VIDEO
mode === Modes.MODE_IMAGE const _options: Options = _vidMode ?
? { {
includeBase64: true, mediaType: 'video',
multiple: allowMultiple || true, smartAlbums: ['UserLibrary', 'Favorites', 'Videos'],
mediaType: 'photo', } : {
smartAlbums: ['UserLibrary', 'Favorites', 'PhotoStream', 'Panoramas', 'Bursts'], includeBase64: true,
} multiple: allowMultiple || true,
: { mediaType: 'photo',
mediaType: 'video', smartAlbums: ['UserLibrary', 'Favorites', 'PhotoStream', 'Panoramas', 'Bursts'],
smartAlbums: ['UserLibrary', 'Favorites', 'Videos'], }
};
if (Modes.MODE_VIDEO) {
_handleVideoSelection();
return;
}
ImagePicker.openPicker(_options) ImagePicker.openPicker(_options)
.then((items) => { .then((items) => {
if (items && !Array.isArray(items)) { if (items && !Array.isArray(items)) {
items = [items]; items = [items];
} }
_handleMediaOnSelected(items, !addToUploads); if (_vidMode) {
_handleVideoSelection(items[0]);
} else {
_handleMediaOnSelected(items, !addToUploads);
}
}) })
.catch((e) => { .catch((e) => {
_handleMediaOnSelectFailure(e); _handleMediaOnSelectFailure(e);
@ -204,12 +204,24 @@ export const UploadsGalleryModal = forwardRef(
}; };
const _handleOpenCamera = () => { const _handleOpenCamera = () => {
ImagePicker.openCamera({
includeBase64: true, const _vidMode = mode === Modes.MODE_VIDEO
mediaType: 'photo', const _options: Options = _vidMode ?
}) {
.then((image) => { mediaType: 'video',
_handleMediaOnSelected([image], true); } : {
includeBase64: true,
mediaType: 'photo',
};
ImagePicker.openCamera(_options)
.then((media) => {
if(_vidMode){
_handleVideoSelection(media);
}else {
_handleMediaOnSelected([media], true);
}
}) })
.catch((e) => { .catch((e) => {
_handleMediaOnSelectFailure(e); _handleMediaOnSelectFailure(e);
@ -362,7 +374,7 @@ export const UploadsGalleryModal = forwardRef(
const _handleVideoSelection = (video: Video) => { const _handleVideoSelection = (video: Video) => {
// show video upload modal, // show video upload modal,
// allow thumbnail selection and uplaods // allow thumbnail selection and uplaods
speakUploaderRef.current.showUploader(); speakUploaderRef.current.showUploader(video);
}; };
const _handleMediaOnSelectFailure = (error) => { const _handleMediaOnSelectFailure = (error) => {

View File

@ -5,6 +5,7 @@ import { ThreeSpeakVideo } from './speak.types';
import { decryptKey } from '../../utils/crypto'; import { decryptKey } from '../../utils/crypto';
import { convertVideoUpload } from './converters'; import { convertVideoUpload } from './converters';
import { BASE_URL_SPEAK_STUDIO, PATH_API, PATH_LOGIN, PATH_MOBILE } from './constants'; 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/'; 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 { try {
const file = { const file = {
uri: media.path, uri: media.path,
type: media.mime, type: media.mime,
name: media.filename || `img_${Math.random()}.mp4`, name: media.filename || `vid_${Math.random()}.mp4`,
size: media.size, size: media.size,
}; };