VideoProcessing.js

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