diff --git a/README.md b/README.md index 55b7b8a1..8bafec31 100644 --- a/README.md +++ b/README.md @@ -15,12 +15,29 @@ ### Manual installation -#### [iOS] This guide is not completed yet +#### [iOS] -1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` -2. Go to `node_modules` ➜ `react-native-video-processing` and add `RNVideoEditor.xcodeproj` -3. In XCode, in the project navigator, select your project. Add `libRNVideoEditor.a` to your project's `Build Phases` ➜ `Link Binary With Libraries` -4. Run your project (`Cmd+R`)< +1. In Xcode, click the "Add Files to ". +2. Go to `node_modules` ➜ `react-native-video-processing` and add `RNVideoProcessing` directory. +3. Make sure `RNVideoProcessing` is "under" the "top-level" and then remove `GPUImage.xcodeproj` from `RNVideoProcessing` directory. +4. Add GPUImage.xcodeproj from `node_modules/react-native-video-processing/RNVideoProcessing` directory to your project and make sure it is "under" the "top-level": + + ![Project Structure](readme_assets/project-structure.png) + +5. In XCode, in the project navigator, select your project. + + Add + - CoreMedia + - CoreVideo + - OpenGLES + - AVFoundation + - QuartzCore + - GPUImage + - MobileCoreServices + + to your project's `Build Phases` ➜ `Link Binary With Libraries`. +6. import `RNVideoProcessing.h` into your `project_name-bridging-header.h`. +4. Clean and Run your project. #### Android version is not supported yet @@ -34,10 +51,18 @@ class App extends Component { constructor(...args) { super(...args); } + + trimVideo() { + this.videoPlayerRef.trim(require('./videoFile.mp4'), startTime, endTime) + .then((newSource) => console.log(newSource)) + .catch(console.warn) + } + render() { return ( this.videoPlayerRef = ref} startTime={30} // seconds endTime={120} // seconds play={true} // default false @@ -48,6 +73,9 @@ class App extends Component { /> console.log(e.startTime, e.endTime)} /> @@ -59,4 +87,4 @@ class App extends Component { ##Contributing 1. Please follow the eslint style guide. -2. Please commit with `$ npm run commit` +2. Please commit with `$ npm run commit` \ No newline at end of file diff --git a/lib/Trimmer/Trimmer.js b/lib/Trimmer/Trimmer.js index 240c0edc..1333be2c 100644 --- a/lib/Trimmer/Trimmer.js +++ b/lib/Trimmer/Trimmer.js @@ -1,59 +1,57 @@ import React, { PropTypes, Component } from 'react'; import { - View, requireNativeComponent, DeviceEventEmitter, processColor } from 'react-native'; import { getActualSource } from '../utils'; const TRIMMER_COMPONENT_NAME = 'RNTrimmerView'; -const TRIM_EVENT = "VIDEO_PROCESSING_EVENT_TRIMMER"; +const TRIM_EVENT = 'VIDEO_PROCESSING_EVENT_TRIMMER'; export class Trimmer extends Component { - static propTypes = { - source: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - width: PropTypes.number, - height: PropTypes.number, - themeColor: PropTypes.string, - onChange: PropTypes.func - }; - - static defaultProps = { - themeColor: 'gray' - }; - - constructor(...args) { - super(...args); - this.state = {}; - this.trimListener = null; - } - - componentDidMount() { - this.trimListener = DeviceEventEmitter.addListener(TRIM_EVENT, (event) => { - if (typeof this.props.onChange === 'function') { - this.props.onChange(event); - } - }); - } - - componentWillUnmount() { - DeviceEventEmitter.removeListener(TRIM_EVENT, this.trimListener); - } - - - render() { - const { source, width, height, themeColor } = this.props; - const actualSource = getActualSource(source); - return ( - - ); - } + static propTypes = { + source: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + width: PropTypes.number, + height: PropTypes.number, + themeColor: PropTypes.string, + onChange: PropTypes.func + }; + + static defaultProps = { + themeColor: 'gray' + }; + + constructor(...args) { + super(...args); + this.state = {}; + this.trimListener = null; + } + + componentDidMount() { + this.trimListener = DeviceEventEmitter.addListener(TRIM_EVENT, (event) => { + if (typeof this.props.onChange === 'function') { + this.props.onChange(event); + } + }); + } + + componentWillUnmount() { + DeviceEventEmitter.removeListener(TRIM_EVENT, this.trimListener); + } + + render() { + const { source, width, height, themeColor } = this.props; + const actualSource = getActualSource(source); + return ( + + ); + } } const RNTrimmer = requireNativeComponent(TRIMMER_COMPONENT_NAME, Trimmer); diff --git a/lib/VideoPlayer/VideoPlayer.js b/lib/VideoPlayer/VideoPlayer.js index 1433a6b4..4c771d9f 100644 --- a/lib/VideoPlayer/VideoPlayer.js +++ b/lib/VideoPlayer/VideoPlayer.js @@ -35,8 +35,9 @@ export class VideoPlayer extends Component { } trim(source, start, end) { + const actualSource = getActualSource(source); return new Promise((resolve, reject) => { - RNVideoTrimmer.trim(source, start, end, (err, output) => { + RNVideoTrimmer.trim(actualSource, start, end, (err, output) => { if (err) { return reject(err); } diff --git a/readme_assets/project-structure.png b/readme_assets/project-structure.png new file mode 100644 index 00000000..bca6584c Binary files /dev/null and b/readme_assets/project-structure.png differ