Skip to content

Instantly share code, notes, and snippets.

@BunHouth
Created October 15, 2020 10:20
Show Gist options
  • Save BunHouth/8fee35823f60f05658c3b1472ed8b843 to your computer and use it in GitHub Desktop.
Save BunHouth/8fee35823f60f05658c3b1472ed8b843 to your computer and use it in GitHub Desktop.
import React, {useState} from 'react';
import RNFetchBlob from 'rn-fetch-blob'
import {
FlatList,
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import RNProgressHud from 'progress-hud';
import ImagePicker from 'react-native-image-picker';
import {ProcessingManager} from 'react-native-video-processing';
import {Player} from './Player';
import {videoPreviewSize} from './utils';
const trimVideo = async video => {
const uri = video.path.includes('file://') ? video.path : `file://${video.path}`;
const info = await ProcessingManager.getVideoInfo(uri);
const previewSize = videoPreviewSize(info.size);
const trim = await ProcessingManager.trim(uri, {
startTime: 0,
endTime: 10,
quality: `${previewSize.width}x${previewSize.height}`,
});
return {
...video,
uri: trim,
};
};
const trimVideos = async files => {
return Promise.all(files.map(trimVideo));
};
export const VideoProcessing = () => {
const [media, setMedia] = useState([]);
const [compressMedia, setCompressMedia] = useState([]);
const onPressImportMedia = () => {
ImagePicker.launchImageLibrary({mediaType: 'video'}, async response => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
setMedia([...media, response]);
}
});
};
const onPressCompressMedia = async () => {
RNProgressHud.showWithStatus('Processing Video');
const videos = await trimVideos(media);
setCompressMedia(videos);
RNProgressHud.dismiss();
};
const onPressCompress = async () => {
const video = media[media.length -1];
if (!video) return;
RNProgressHud.showWithStatus('Processing Video');
const startTime = new Date();
console.log({startTime})
const uri = video.path.includes('file://') ? video.path : `file://${video.path}`;
const originalFile = await RNFetchBlob.fs.stat(uri);
console.log(originalFile)
const info = await ProcessingManager.getVideoInfo(uri);
const previewSize = videoPreviewSize(info.size);
const options = {
width: previewSize.width,
height: previewSize.height,
bitrateMultiplier: 3,
saveToCameraRoll: false, // default is false, iOS only
saveWithCurrentDate: true, // default is false, iOS only
minimumBitrate: 300000,
};
const file = await ProcessingManager.compress(uri, options);
const newInfo = await ProcessingManager.getVideoInfo(file.source);
const compressFile = await RNFetchBlob.fs.stat(file.source);
const endTime = new Date();
console.log({startTime, endTime})
console.log(compressFile)
console.log({newInfo})
console.log({endTime})
console.log({duration: endTime.getTime() - startTime.getTime()});
RNProgressHud.dismiss();
}
const renderItem = ({item}) => <Player video={item} />;
console.log(media)
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.contaniner}>
<TouchableOpacity
onPress={onPressImportMedia}
style={styles.importButton}>
<Text>Import Media</Text>
</TouchableOpacity>
<FlatList
data={media}
horizontal
renderItem={renderItem}
keyExtractor={(_, index) => String(index)}
style={{height: 250}}
/>
<TouchableOpacity
onPress={onPressCompressMedia}
disabled={!media.length}
style={styles.importButton}>
<Text>Compress Media</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={onPressCompress}
disabled={!media.length}
style={styles.importButton}>
<Text>ProcessingManager.compress</Text>
</TouchableOpacity>
<FlatList
data={compressMedia}
horizontal
renderItem={renderItem}
keyExtractor={(_, index) => String(index)}
style={{height: 250}}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
safeArea: {flex: 1},
contaniner: {},
importButton: {
padding: 10,
justifyContent: 'center',
alignItems: 'center',
},
scrollContainer: {
height: 250,
backgroundColor: 'blue',
flex: 1,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment