mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-11-29 22:07:46 +03:00
first video selection to upload simple post
This commit is contained in:
parent
9a2f4f7c07
commit
61271e2589
@ -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}
|
||||||
/>
|
/>
|
||||||
|
@ -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) => {
|
||||||
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user