├── .circleci └── config.yml ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .watchmanconfig ├── .yarnrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── LICENSE.md ├── README.md ├── babel.config.js ├── example ├── .bundle │ └── config ├── .node-version ├── .ruby-version ├── .watchmanconfig ├── Gemfile ├── android │ ├── app │ │ ├── _BUCK │ │ ├── build.gradle │ │ ├── build_defs.bzl │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── videoprocessorexample │ │ │ │ └── ReactNativeFlipper.java │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── videoprocessorexample │ │ │ │ ├── MainActivity.java │ │ │ │ ├── MainApplication.java │ │ │ │ └── newarchitecture │ │ │ │ ├── MainApplicationReactNativeHost.java │ │ │ │ ├── components │ │ │ │ └── MainComponentsRegistry.java │ │ │ │ └── modules │ │ │ │ └── MainApplicationTurboModuleManagerDelegate.java │ │ │ ├── jni │ │ │ ├── CMakeLists.txt │ │ │ ├── MainApplicationModuleProvider.cpp │ │ │ ├── MainApplicationModuleProvider.h │ │ │ ├── MainApplicationTurboModuleManagerDelegate.cpp │ │ │ ├── MainApplicationTurboModuleManagerDelegate.h │ │ │ ├── MainComponentsRegistry.cpp │ │ │ ├── MainComponentsRegistry.h │ │ │ └── OnLoad.cpp │ │ │ └── res │ │ │ ├── drawable │ │ │ └── rn_edit_text_material.xml │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── .xcode.env │ ├── File.swift │ ├── Podfile │ ├── Podfile.lock │ ├── VideoProcessorExample-Bridging-Header.h │ ├── VideoProcessorExample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── VideoProcessorExample.xcscheme │ ├── VideoProcessorExample.xcworkspace │ │ └── contents.xcworkspacedata │ ├── VideoProcessorExample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ └── VideoProcessorExampleTests │ │ ├── Info.plist │ │ └── VideoProcessorExampleTests.m ├── metro.config.js ├── package.json ├── src │ ├── App.js │ └── App.tsx └── yarn.lock ├── lefthook.yml ├── package.json ├── scripts └── bootstrap.js ├── src ├── __tests__ │ ├── index.test.js │ └── index.test.tsx ├── components │ ├── Frame.js │ ├── Frame.tsx │ ├── FrameSlider.js │ ├── FrameSlider.tsx │ ├── Marker.js │ ├── Marker.tsx │ ├── TrimmerComponent.js │ ├── TrimmerComponent.tsx │ ├── styles.js │ ├── styles.ts │ ├── types.js │ └── types.ts ├── functions │ ├── VideoFunctions.js │ └── VideoFunctions.ts ├── index.js ├── index.ts └── types │ ├── VideoInfoType.js │ └── VideoInfoType.ts ├── tsconfig.build.json ├── tsconfig.json └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2.1 2 | 3 | executors: 4 | default: 5 | docker: 6 | - image: circleci/node:16 7 | working_directory: ~/project 8 | 9 | commands: 10 | attach_project: 11 | steps: 12 | - attach_workspace: 13 | at: ~/project 14 | 15 | jobs: 16 | install-dependencies: 17 | executor: default 18 | steps: 19 | - checkout 20 | - attach_project 21 | - restore_cache: 22 | keys: 23 | - dependencies-{{ checksum "package.json" }} 24 | - dependencies- 25 | - restore_cache: 26 | keys: 27 | - dependencies-example-{{ checksum "example/package.json" }} 28 | - dependencies-example- 29 | - run: 30 | name: Install dependencies 31 | command: | 32 | yarn install --cwd example --frozen-lockfile 33 | yarn install --frozen-lockfile 34 | - save_cache: 35 | key: dependencies-{{ checksum "package.json" }} 36 | paths: node_modules 37 | - save_cache: 38 | key: dependencies-example-{{ checksum "example/package.json" }} 39 | paths: example/node_modules 40 | - persist_to_workspace: 41 | root: . 42 | paths: . 43 | 44 | lint: 45 | executor: default 46 | steps: 47 | - attach_project 48 | - run: 49 | name: Lint files 50 | command: | 51 | yarn lint 52 | 53 | typescript: 54 | executor: default 55 | steps: 56 | - attach_project 57 | - run: 58 | name: Typecheck files 59 | command: | 60 | yarn typescript 61 | 62 | unit-tests: 63 | executor: default 64 | steps: 65 | - attach_project 66 | - run: 67 | name: Run unit tests 68 | command: | 69 | yarn test --coverage 70 | - store_artifacts: 71 | path: coverage 72 | destination: coverage 73 | 74 | build-package: 75 | executor: default 76 | steps: 77 | - attach_project 78 | - run: 79 | name: Build package 80 | command: | 81 | yarn prepare 82 | 83 | workflows: 84 | build-and-test: 85 | jobs: 86 | - install-dependencies 87 | - lint: 88 | requires: 89 | - install-dependencies 90 | - typescript: 91 | requires: 92 | - install-dependencies 93 | - unit-tests: 94 | requires: 95 | - install-dependencies 96 | - build-package: 97 | requires: 98 | - install-dependencies 99 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | indent_style = space 10 | indent_size = 2 11 | 12 | end_of_line = lf 13 | charset = utf-8 14 | trim_trailing_whitespace = true 15 | insert_final_newline = true 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # XDE 6 | .expo/ 7 | 8 | # VSCode 9 | .vscode/ 10 | jsconfig.json 11 | 12 | # Xcode 13 | # 14 | build/ 15 | *.pbxuser 16 | !default.pbxuser 17 | *.mode1v3 18 | !default.mode1v3 19 | *.mode2v3 20 | !default.mode2v3 21 | *.perspectivev3 22 | !default.perspectivev3 23 | xcuserdata 24 | *.xccheckout 25 | *.moved-aside 26 | DerivedData 27 | *.hmap 28 | *.ipa 29 | *.xcuserstate 30 | project.xcworkspace 31 | 32 | # Android/IJ 33 | # 34 | .classpath 35 | .cxx 36 | .gradle 37 | .idea 38 | .project 39 | .settings 40 | local.properties 41 | android.iml 42 | 43 | # Cocoapods 44 | # 45 | example/ios/Pods 46 | 47 | # Ruby 48 | example/vendor/ 49 | 50 | # node.js 51 | # 52 | node_modules/ 53 | npm-debug.log 54 | yarn-debug.log 55 | yarn-error.log 56 | 57 | # BUCK 58 | buck-out/ 59 | \.buckd/ 60 | android/app/libs 61 | android/keystores/debug.keystore 62 | 63 | # Expo 64 | .expo/* 65 | 66 | # generated by bob 67 | lib/ 68 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | # Override Yarn command so we can automatically setup the repo on running `yarn` 2 | 3 | yarn-path "scripts/bootstrap.js" 4 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributor Covenant Code of Conduct 3 | 4 | ## Our Pledge 5 | 6 | We as members, contributors, and leaders pledge to make participation in our 7 | community a harassment-free experience for everyone, regardless of age, body 8 | size, visible or invisible disability, ethnicity, sex characteristics, gender 9 | identity and expression, level of experience, education, socio-economic status, 10 | nationality, personal appearance, race, caste, color, religion, or sexual 11 | identity and orientation. 12 | 13 | We pledge to act and interact in ways that contribute to an open, welcoming, 14 | diverse, inclusive, and healthy community. 15 | 16 | ## Our Standards 17 | 18 | Examples of behavior that contributes to a positive environment for our 19 | community include: 20 | 21 | * Demonstrating empathy and kindness toward other people 22 | * Being respectful of differing opinions, viewpoints, and experiences 23 | * Giving and gracefully accepting constructive feedback 24 | * Accepting responsibility and apologizing to those affected by our mistakes, 25 | and learning from the experience 26 | * Focusing on what is best not just for us as individuals, but for the overall 27 | community 28 | 29 | Examples of unacceptable behavior include: 30 | 31 | * The use of sexualized language or imagery, and sexual attention or advances of 32 | any kind 33 | * Trolling, insulting or derogatory comments, and personal or political attacks 34 | * Public or private harassment 35 | * Publishing others' private information, such as a physical or email address, 36 | without their explicit permission 37 | * Other conduct which could reasonably be considered inappropriate in a 38 | professional setting 39 | 40 | ## Enforcement Responsibilities 41 | 42 | Community leaders are responsible for clarifying and enforcing our standards of 43 | acceptable behavior and will take appropriate and fair corrective action in 44 | response to any behavior that they deem inappropriate, threatening, offensive, 45 | or harmful. 46 | 47 | Community leaders have the right and responsibility to remove, edit, or reject 48 | comments, commits, code, wiki edits, issues, and other contributions that are 49 | not aligned to this Code of Conduct, and will communicate reasons for moderation 50 | decisions when appropriate. 51 | 52 | ## Scope 53 | 54 | This Code of Conduct applies within all community spaces, and also applies when 55 | an individual is officially representing the community in public spaces. 56 | Examples of representing our community include using an official e-mail address, 57 | posting via an official social media account, or acting as an appointed 58 | representative at an online or offline event. 59 | 60 | ## Enforcement 61 | 62 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 63 | reported to the community leaders responsible for enforcement at 64 | [INSERT CONTACT METHOD]. 65 | All complaints will be reviewed and investigated promptly and fairly. 66 | 67 | All community leaders are obligated to respect the privacy and security of the 68 | reporter of any incident. 69 | 70 | ## Enforcement Guidelines 71 | 72 | Community leaders will follow these Community Impact Guidelines in determining 73 | the consequences for any action they deem in violation of this Code of Conduct: 74 | 75 | ### 1. Correction 76 | 77 | **Community Impact**: Use of inappropriate language or other behavior deemed 78 | unprofessional or unwelcome in the community. 79 | 80 | **Consequence**: A private, written warning from community leaders, providing 81 | clarity around the nature of the violation and an explanation of why the 82 | behavior was inappropriate. A public apology may be requested. 83 | 84 | ### 2. Warning 85 | 86 | **Community Impact**: A violation through a single incident or series of 87 | actions. 88 | 89 | **Consequence**: A warning with consequences for continued behavior. No 90 | interaction with the people involved, including unsolicited interaction with 91 | those enforcing the Code of Conduct, for a specified period of time. This 92 | includes avoiding interactions in community spaces as well as external channels 93 | like social media. Violating these terms may lead to a temporary or permanent 94 | ban. 95 | 96 | ### 3. Temporary Ban 97 | 98 | **Community Impact**: A serious violation of community standards, including 99 | sustained inappropriate behavior. 100 | 101 | **Consequence**: A temporary ban from any sort of interaction or public 102 | communication with the community for a specified period of time. No public or 103 | private interaction with the people involved, including unsolicited interaction 104 | with those enforcing the Code of Conduct, is allowed during this period. 105 | Violating these terms may lead to a permanent ban. 106 | 107 | ### 4. Permanent Ban 108 | 109 | **Community Impact**: Demonstrating a pattern of violation of community 110 | standards, including sustained inappropriate behavior, harassment of an 111 | individual, or aggression toward or disparagement of classes of individuals. 112 | 113 | **Consequence**: A permanent ban from any sort of public interaction within the 114 | community. 115 | 116 | ## Attribution 117 | 118 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 119 | version 2.1, available at 120 | [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. 121 | 122 | Community Impact Guidelines were inspired by 123 | [Mozilla's code of conduct enforcement ladder][Mozilla CoC]. 124 | 125 | For answers to common questions about this code of conduct, see the FAQ at 126 | [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at 127 | [https://www.contributor-covenant.org/translations][translations]. 128 | 129 | [homepage]: https://www.contributor-covenant.org 130 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html 131 | [Mozilla CoC]: https://github.com/mozilla/diversity 132 | [FAQ]: https://www.contributor-covenant.org/faq 133 | [translations]: https://www.contributor-covenant.org/translations 134 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are always welcome, no matter how large or small! 4 | 5 | We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. Before contributing, please read the [code of conduct](./CODE_OF_CONDUCT.md). 6 | 7 | ## Development workflow 8 | 9 | To get started with the project, run `yarn` in the root directory to install the required dependencies for each package: 10 | 11 | ```sh 12 | yarn 13 | ``` 14 | 15 | > While it's possible to use [`npm`](https://github.com/npm/cli), the tooling is built around [`yarn`](https://classic.yarnpkg.com/), so you'll have an easier time if you use `yarn` for development. 16 | 17 | While developing, you can run the [example app](/example/) to test your changes. Any changes you make in your library's JavaScript code will be reflected in the example app without a rebuild. If you change any native code, then you'll need to rebuild the example app. 18 | 19 | To start the packager: 20 | 21 | ```sh 22 | yarn example start 23 | ``` 24 | 25 | To run the example app on Android: 26 | 27 | ```sh 28 | yarn example android 29 | ``` 30 | 31 | To run the example app on iOS: 32 | 33 | ```sh 34 | yarn example ios 35 | ``` 36 | 37 | To run the example app on Web: 38 | 39 | ```sh 40 | yarn example web 41 | ``` 42 | 43 | Make sure your code passes TypeScript and ESLint. Run the following to verify: 44 | 45 | ```sh 46 | yarn typescript 47 | yarn lint 48 | ``` 49 | 50 | To fix formatting errors, run the following: 51 | 52 | ```sh 53 | yarn lint --fix 54 | ``` 55 | 56 | Remember to add tests for your change if possible. Run the unit tests by: 57 | 58 | ```sh 59 | yarn test 60 | ``` 61 | ### Commit message convention 62 | 63 | We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages: 64 | 65 | - `fix`: bug fixes, e.g. fix crash due to deprecated method. 66 | - `feat`: new features, e.g. add new method to the module. 67 | - `refactor`: code refactor, e.g. migrate from class components to hooks. 68 | - `docs`: changes into documentation, e.g. add usage example for the module.. 69 | - `test`: adding or updating tests, e.g. add integration tests using detox. 70 | - `chore`: tooling changes, e.g. change CI config. 71 | 72 | Our pre-commit hooks verify that your commit message matches this format when committing. 73 | 74 | ### Linting and tests 75 | 76 | [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/) 77 | 78 | We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing. 79 | 80 | Our pre-commit hooks verify that the linter and tests pass when committing. 81 | 82 | ### Publishing to npm 83 | 84 | We use [release-it](https://github.com/release-it/release-it) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc. 85 | 86 | To publish new versions, run the following: 87 | 88 | ```sh 89 | yarn release 90 | ``` 91 | 92 | ### Scripts 93 | 94 | The `package.json` file contains various scripts for common tasks: 95 | 96 | - `yarn bootstrap`: setup project by installing all dependencies and pods. 97 | - `yarn typescript`: type-check files with TypeScript. 98 | - `yarn lint`: lint files with ESLint. 99 | - `yarn test`: run unit tests with Jest. 100 | - `yarn example start`: start the Metro server for the example app. 101 | - `yarn example android`: run the example app on Android. 102 | - `yarn example ios`: run the example app on iOS. 103 | 104 | ### Sending a pull request 105 | 106 | > **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github). 107 | 108 | When you're sending a pull request: 109 | 110 | - Prefer small pull requests focused on one change. 111 | - Verify that linters and tests are passing. 112 | - Review the documentation to make sure it looks good. 113 | - Follow the pull request template when opening a pull request. 114 | - For pull requests that change the API or implementation, discuss with maintainers first by opening an issue. 115 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 salihgun 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @salihgun/react-native-video-processor 2 | 3 | Video processing functions using [@ffmpeg-kit](https://github.com/arthenica/ffmpeg-kit) 4 | 5 | ## Preview 6 | 7 | ## Table of contents 8 | 9 | - [Installation](#installation) 10 | - [Usage](#usage) 11 | - [Contributing](#contributing) 12 | - [License](#license) 13 | 14 | ## Installation 15 | 16 | ```sh 17 | yarn add @salihgun/react-native-video-processor ffmpeg-kit-react-native 18 | ``` 19 | 20 | or 21 | 22 | ```sh 23 | npm install @salihgun/react-native-video-processor ffmpeg-kit-react-native 24 | ``` 25 | 26 | ## Android Setup 27 | 28 | - Edit `android/build.gradle` file and add the package name in `ext.ffmpegKitPackage` variable. 29 | 30 | ```gradle 31 | ext { 32 | ffmpegKitPackage = "full-gpl-lts" 33 | } 34 | ``` 35 | 36 | - Edit `android/app/build.gradle` file and add packaging options above `defaultConfig`. 37 | 38 | ```gradle 39 | packagingOptions { 40 | pickFirst 'lib/x86/libc++_shared.so' 41 | pickFirst 'lib/x86_64/libc++_shared.so' 42 | pickFirst 'lib/armeabi-v7a/libc++_shared.so' 43 | pickFirst 'lib/arm64-v8a/libc++_shared.so' 44 | } 45 | ``` 46 | 47 | ## iOS Setup 48 | 49 | - Edit `ios/Podfile` file and add the package name as `subspec`. After that run `pod install` again. 50 | 51 | ```ruby 52 | pod 'ffmpeg-kit-react-native', :subspecs => ['full-gpl-lts'], :podspec => '../node_modules/ffmpeg-kit-react-native/ffmpeg-kit-react-native.podspec' 53 | ``` 54 | 55 | ## Usage 56 | 57 |

Video Trimmer Component

58 | 59 |

60 | animated 61 |

62 | 63 | ```js 64 | // ** Important! Please install react-native-video to run this component. 65 | // yarn add react-native-video 66 | 67 | import VideoManager, { TrimmerComponent } from '@salihgun/react-native-video-processor' 68 | 69 | // Use createFreames function to create frames for the video // fps=5 for the example 70 | const framesPath = await VideoManager.createFrames(videoPath, 5); 71 | 72 | //User getVideoInfo function to get video duration 73 | const videoInfo = await VideoManager.getVideoInfo(videoPath) 74 | 75 | // Then you can use trimVideo function to trim selected part. 76 | const clippedVideoPath = await VideoManager.trimVideo(videoPath, value, clipDuration) 77 | 78 | 86 | ``` 87 | 88 | 89 |

Video Info

90 | 91 |

92 | animated 93 |

94 | 95 | ```js 96 | import VideoManager from '@salihgun/react-native-video-processor' 97 | 98 | 99 | const result = await VideoManager.getVideoInfo(videoPath) 100 | 101 | // example result 102 | // result = { 103 | // duration: 4.5, 104 | // creationDate: "2022-11-11T19:08:08.547Z", 105 | // size: 496145 bytes, 106 | // bit_rate: 882035, 107 | // width: 320, 108 | // height: 568, 109 | // frame_rate: "30/1", 110 | // codec_name: "h264", 111 | // codec_type: "video", 112 | // sample_aspect_radio: "1:1", 113 | // } 114 | ``` 115 | 116 |

Create Thumbnail

117 | 118 |

119 | animated 120 |

121 | 122 | ```js 123 | import VideoManager from '@salihgun/react-native-video-processor' 124 | 125 | const thumbnailPath = await VideoManager.createThumbnail(videoPath) 126 | ``` 127 | 128 | 129 |

Trim Video

130 | 131 |

132 | animated 133 |

134 | 135 | ```js 136 | import VideoManager from '@salihgun/react-native-video-processor' 137 | 138 | const [startTime, setStartTime] = React.useState(''); 139 | const [duration, setDuration] = React.useState(''); 140 | 141 | const clippedVideoPath = await VideoManager.trimVideo(videoPath, startTime, duration) 142 | ``` 143 | 144 |

Create Frames of a Video

145 | 146 |

147 | animated 148 |

149 | 150 | ```js 151 | import VideoManager from '@salihgun/react-native-video-processor' 152 | 153 | // createFrames function has two parameters. Video path and an optional fps value which is default 1 154 | const framesPath = await VideoManager.createFrames(videoPath, 3) // fps = 3 155 | 156 | // render method 157 | 158 | {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((_, index) => { 159 | return ( 160 | 165 | ); 166 | })} 167 | 168 | 169 | ``` 170 | 171 |

Reverse Video

172 | 173 |

174 | animated 175 |

176 | 177 | ```js 178 | import VideoManager from '@salihgun/react-native-video-processor' 179 | 180 | const reversedVideoPath = await VideoManager.reverseVideo(videoPath) 181 | 182 | ``` 183 | 184 |

Merge Videos

185 | 186 |

187 | animated 188 |

189 | 190 | ```js 191 | import VideoManager from '@salihgun/react-native-video-processor' 192 | import RNFS from "react-native-fs"; 193 | 194 | // You can use RNFS to create a video path 195 | const outputPath = RNFS.DocumentDirectoryPath + "/mergedVideos.mp4"; 196 | 197 | // There are two optional scale parameters to merge video 198 | // height and width default value is 1920x1080 199 | // you can change it if you need. 200 | // There is also an optional "hasAudio" parameter and default value is true. 201 | // If one of your videos has no audio, merge doesn't work in this version. 202 | const mergedVideoPath = await VideoManager.mergeVideos(videoPathsArray,outputPath); 203 | 204 | ``` 205 | 206 |

Boomerang Video

207 | 208 |

209 | animated 210 |

211 | 212 | ```js 213 | import VideoManager from '@salihgun/react-native-video-processor' 214 | 215 | // Set 'reorder' option to true if you want to reorder videos. 216 | // There are height and width parameters now. You can set a custom height and/or width. 217 | const boomerangVideoPath = await VideoManager.boomerang(videoPath) // reorder = false 218 | 219 | ``` 220 | 221 |

Set speed of the Video

222 | 223 |

224 | animated 225 |

226 | 227 | ```js 228 | import VideoManager from '@salihgun/react-native-video-processor' 229 | 230 | // Use speed property to set speed. Default is 1 231 | const speedVideoPath = await VideoManager.setSpeed(videoPath) // speed = 1 232 | 233 | ``` 234 | 235 | ## Contributing 236 | 237 | See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. 238 | 239 | ## License 240 | 241 | MIT 242 | 243 | --- 244 | 245 | Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) 246 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /example/.node-version: -------------------------------------------------------------------------------- 1 | 16 2 | -------------------------------------------------------------------------------- /example/.ruby-version: -------------------------------------------------------------------------------- 1 | 2.7.5 2 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby '2.7.5' 5 | 6 | gem 'cocoapods', '~> 1.11', '>= 1.11.2' 7 | -------------------------------------------------------------------------------- /example/android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.videoprocessorexample", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.videoprocessorexample", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | import org.apache.tools.ant.taskdefs.condition.Os 5 | 6 | /** 7 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 8 | * and bundleReleaseJsAndAssets). 9 | * These basically call `react-native bundle` with the correct arguments during the Android build 10 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 11 | * bundle directly from the development server. Below you can see all the possible configurations 12 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 13 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 14 | * 15 | * project.ext.react = [ 16 | * // the name of the generated asset file containing your JS bundle 17 | * bundleAssetName: "index.android.bundle", 18 | * 19 | * // the entry file for bundle generation. If none specified and 20 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is 21 | * // default. Can be overridden with ENTRY_FILE environment variable. 22 | * entryFile: "index.android.js", 23 | * 24 | * // https://reactnative.dev/docs/performance#enable-the-ram-format 25 | * bundleCommand: "ram-bundle", 26 | * 27 | * // whether to bundle JS and assets in debug mode 28 | * bundleInDebug: false, 29 | * 30 | * // whether to bundle JS and assets in release mode 31 | * bundleInRelease: true, 32 | * 33 | * // whether to bundle JS and assets in another build variant (if configured). 34 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 35 | * // The configuration property can be in the following formats 36 | * // 'bundleIn${productFlavor}${buildType}' 37 | * // 'bundleIn${buildType}' 38 | * // bundleInFreeDebug: true, 39 | * // bundleInPaidRelease: true, 40 | * // bundleInBeta: true, 41 | * 42 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 43 | * // for example: to disable dev mode in the staging build type (if configured) 44 | * devDisabledInStaging: true, 45 | * // The configuration property can be in the following formats 46 | * // 'devDisabledIn${productFlavor}${buildType}' 47 | * // 'devDisabledIn${buildType}' 48 | * 49 | * // the root of your project, i.e. where "package.json" lives 50 | * root: "../../", 51 | * 52 | * // where to put the JS bundle asset in debug mode 53 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 54 | * 55 | * // where to put the JS bundle asset in release mode 56 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 57 | * 58 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 59 | * // require('./image.png')), in debug mode 60 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 61 | * 62 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 63 | * // require('./image.png')), in release mode 64 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 65 | * 66 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 67 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 68 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 69 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 70 | * // for example, you might want to remove it from here. 71 | * inputExcludes: ["android/**", "ios/**"], 72 | * 73 | * // override which node gets called and with what additional arguments 74 | * nodeExecutableAndArgs: ["node"], 75 | * 76 | * // supply additional arguments to the packager 77 | * extraPackagerArgs: [] 78 | * ] 79 | */ 80 | 81 | project.ext.react = [ 82 | enableHermes: true, // clean and rebuild if changing 83 | ] 84 | 85 | apply from: "../../node_modules/react-native/react.gradle" 86 | 87 | /** 88 | * Set this to true to create two separate APKs instead of one: 89 | * - An APK that only works on ARM devices 90 | * - An APK that only works on x86 devices 91 | * The advantage is the size of the APK is reduced by about 4MB. 92 | * Upload all the APKs to the Play Store and people will download 93 | * the correct one based on the CPU architecture of their device. 94 | */ 95 | def enableSeparateBuildPerCPUArchitecture = false 96 | 97 | /** 98 | * Run Proguard to shrink the Java bytecode in release builds. 99 | */ 100 | def enableProguardInReleaseBuilds = false 101 | 102 | /** 103 | * The preferred build flavor of JavaScriptCore. 104 | * 105 | * For example, to use the international variant, you can use: 106 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 107 | * 108 | * The international variant includes ICU i18n library and necessary data 109 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 110 | * give correct results when using with locales other than en-US. Note that 111 | * this variant is about 6MiB larger per architecture than default. 112 | */ 113 | def jscFlavor = 'org.webkit:android-jsc:+' 114 | 115 | /** 116 | * Whether to enable the Hermes VM. 117 | * 118 | * This should be set on project.ext.react and that value will be read here. If it is not set 119 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode 120 | * and the benefits of using Hermes will therefore be sharply reduced. 121 | */ 122 | def enableHermes = project.ext.react.get("enableHermes", false); 123 | 124 | /** 125 | * Architectures to build native code for. 126 | */ 127 | def reactNativeArchitectures() { 128 | def value = project.getProperties().get("reactNativeArchitectures") 129 | return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"] 130 | } 131 | 132 | android { 133 | ndkVersion rootProject.ext.ndkVersion 134 | 135 | compileSdkVersion rootProject.ext.compileSdkVersion 136 | 137 | packagingOptions { 138 | pickFirst 'lib/x86/libc++_shared.so' 139 | pickFirst 'lib/x86_64/libc++_shared.so' 140 | pickFirst 'lib/armeabi-v7a/libc++_shared.so' 141 | pickFirst 'lib/arm64-v8a/libc++_shared.so' 142 | } 143 | 144 | defaultConfig { 145 | applicationId "com.videoprocessorexample" 146 | minSdkVersion rootProject.ext.minSdkVersion 147 | targetSdkVersion rootProject.ext.targetSdkVersion 148 | versionCode 1 149 | versionName "1.0" 150 | buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString() 151 | 152 | if (isNewArchitectureEnabled()) { 153 | // We configure the CMake build only if you decide to opt-in for the New Architecture. 154 | externalNativeBuild { 155 | cmake { 156 | arguments "-DPROJECT_BUILD_DIR=$buildDir", 157 | "-DREACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid", 158 | "-DREACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build", 159 | "-DNODE_MODULES_DIR=$rootDir/../node_modules", 160 | "-DANDROID_STL=c++_shared" 161 | } 162 | } 163 | if (!enableSeparateBuildPerCPUArchitecture) { 164 | ndk { 165 | abiFilters (*reactNativeArchitectures()) 166 | } 167 | } 168 | } 169 | } 170 | 171 | if (isNewArchitectureEnabled()) { 172 | // We configure the NDK build only if you decide to opt-in for the New Architecture. 173 | externalNativeBuild { 174 | cmake { 175 | path "$projectDir/src/main/jni/CMakeLists.txt" 176 | } 177 | } 178 | def reactAndroidProjectDir = project(':ReactAndroid').projectDir 179 | def packageReactNdkDebugLibs = tasks.register("packageReactNdkDebugLibs", Copy) { 180 | dependsOn(":ReactAndroid:packageReactNdkDebugLibsForBuck") 181 | from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib") 182 | into("$buildDir/react-ndk/exported") 183 | } 184 | def packageReactNdkReleaseLibs = tasks.register("packageReactNdkReleaseLibs", Copy) { 185 | dependsOn(":ReactAndroid:packageReactNdkReleaseLibsForBuck") 186 | from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib") 187 | into("$buildDir/react-ndk/exported") 188 | } 189 | afterEvaluate { 190 | // If you wish to add a custom TurboModule or component locally, 191 | // you should uncomment this line. 192 | // preBuild.dependsOn("generateCodegenArtifactsFromSchema") 193 | preDebugBuild.dependsOn(packageReactNdkDebugLibs) 194 | preReleaseBuild.dependsOn(packageReactNdkReleaseLibs) 195 | 196 | // Due to a bug inside AGP, we have to explicitly set a dependency 197 | // between configureCMakeDebug* tasks and the preBuild tasks. 198 | // This can be removed once this is solved: https://issuetracker.google.com/issues/207403732 199 | configureCMakeRelWithDebInfo.dependsOn(preReleaseBuild) 200 | configureCMakeDebug.dependsOn(preDebugBuild) 201 | reactNativeArchitectures().each { architecture -> 202 | tasks.findByName("configureCMakeDebug[${architecture}]")?.configure { 203 | dependsOn("preDebugBuild") 204 | } 205 | tasks.findByName("configureCMakeRelWithDebInfo[${architecture}]")?.configure { 206 | dependsOn("preReleaseBuild") 207 | } 208 | } 209 | } 210 | } 211 | 212 | splits { 213 | abi { 214 | reset() 215 | enable enableSeparateBuildPerCPUArchitecture 216 | universalApk false // If true, also generate a universal APK 217 | include (*reactNativeArchitectures()) 218 | } 219 | } 220 | signingConfigs { 221 | debug { 222 | storeFile file('debug.keystore') 223 | storePassword 'android' 224 | keyAlias 'androiddebugkey' 225 | keyPassword 'android' 226 | } 227 | } 228 | buildTypes { 229 | debug { 230 | signingConfig signingConfigs.debug 231 | } 232 | release { 233 | // Caution! In production, you need to generate your own keystore file. 234 | // see https://reactnative.dev/docs/signed-apk-android. 235 | signingConfig signingConfigs.debug 236 | minifyEnabled enableProguardInReleaseBuilds 237 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 238 | } 239 | } 240 | 241 | // applicationVariants are e.g. debug, release 242 | applicationVariants.all { variant -> 243 | variant.outputs.each { output -> 244 | // For each separate APK per architecture, set a unique version code as described here: 245 | // https://developer.android.com/studio/build/configure-apk-splits.html 246 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. 247 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 248 | def abi = output.getFilter(OutputFile.ABI) 249 | if (abi != null) { // null for the universal-debug, universal-release variants 250 | output.versionCodeOverride = 251 | defaultConfig.versionCode * 1000 + versionCodes.get(abi) 252 | } 253 | 254 | } 255 | } 256 | } 257 | 258 | dependencies { 259 | implementation fileTree(dir: "libs", include: ["*.jar"]) 260 | 261 | //noinspection GradleDynamicVersion 262 | implementation "com.facebook.react:react-native:+" // From node_modules 263 | 264 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" 265 | 266 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { 267 | exclude group:'com.facebook.fbjni' 268 | } 269 | 270 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 271 | exclude group:'com.facebook.flipper' 272 | exclude group:'com.squareup.okhttp3', module:'okhttp' 273 | } 274 | 275 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { 276 | exclude group:'com.facebook.flipper' 277 | } 278 | 279 | if (enableHermes) { 280 | //noinspection GradleDynamicVersion 281 | implementation("com.facebook.react:hermes-engine:+") { // From node_modules 282 | exclude group:'com.facebook.fbjni' 283 | } 284 | } else { 285 | implementation jscFlavor 286 | } 287 | } 288 | 289 | if (isNewArchitectureEnabled()) { 290 | // If new architecture is enabled, we let you build RN from source 291 | // Otherwise we fallback to a prebuilt .aar bundled in the NPM package. 292 | // This will be applied to all the imported transtitive dependency. 293 | configurations.all { 294 | resolutionStrategy.dependencySubstitution { 295 | substitute(module("com.facebook.react:react-native")) 296 | .using(project(":ReactAndroid")) 297 | .because("On New Architecture we're building React Native from source") 298 | substitute(module("com.facebook.react:hermes-engine")) 299 | .using(project(":ReactAndroid:hermes-engine")) 300 | .because("On New Architecture we're building Hermes from source") 301 | } 302 | } 303 | } 304 | 305 | // Run this once to be able to run the application with BUCK 306 | // puts all compile dependencies into folder libs for BUCK to use 307 | task copyDownloadableDepsToLibs(type: Copy) { 308 | from configurations.implementation 309 | into 'libs' 310 | } 311 | 312 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 313 | 314 | def isNewArchitectureEnabled() { 315 | // To opt-in for the New Architecture, you can either: 316 | // - Set `newArchEnabled` to true inside the `gradle.properties` file 317 | // - Invoke gradle with `-newArchEnabled=true` 318 | // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true` 319 | return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true" 320 | } 321 | -------------------------------------------------------------------------------- /example/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/app/debug.keystore -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/android/app/src/debug/java/com/videoprocessorexample/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.videoprocessorexample; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin; 21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 22 | import com.facebook.react.ReactInstanceEventListener; 23 | import com.facebook.react.ReactInstanceManager; 24 | import com.facebook.react.bridge.ReactContext; 25 | import com.facebook.react.modules.network.NetworkingModule; 26 | import okhttp3.OkHttpClient; 27 | 28 | public class ReactNativeFlipper { 29 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 30 | if (FlipperUtils.shouldEnableFlipper(context)) { 31 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 32 | 33 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 34 | client.addPlugin(new ReactFlipperPlugin()); 35 | client.addPlugin(new DatabasesFlipperPlugin(context)); 36 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 37 | client.addPlugin(CrashReporterPlugin.getInstance()); 38 | 39 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 40 | NetworkingModule.setCustomClientBuilder( 41 | new NetworkingModule.CustomClientBuilder() { 42 | @Override 43 | public void apply(OkHttpClient.Builder builder) { 44 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 45 | } 46 | }); 47 | client.addPlugin(networkFlipperPlugin); 48 | client.start(); 49 | 50 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 51 | // Hence we run if after all native modules have been initialized 52 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 53 | if (reactContext == null) { 54 | reactInstanceManager.addReactInstanceEventListener( 55 | new ReactInstanceEventListener() { 56 | @Override 57 | public void onReactContextInitialized(ReactContext reactContext) { 58 | reactInstanceManager.removeReactInstanceEventListener(this); 59 | reactContext.runOnNativeModulesQueueThread( 60 | new Runnable() { 61 | @Override 62 | public void run() { 63 | client.addPlugin(new FrescoFlipperPlugin()); 64 | } 65 | }); 66 | } 67 | }); 68 | } else { 69 | client.addPlugin(new FrescoFlipperPlugin()); 70 | } 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/videoprocessorexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.videoprocessorexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactActivityDelegate; 5 | import com.facebook.react.ReactRootView; 6 | 7 | public class MainActivity extends ReactActivity { 8 | 9 | /** 10 | * Returns the name of the main component registered from JavaScript. This is used to schedule 11 | * rendering of the component. 12 | */ 13 | @Override 14 | protected String getMainComponentName() { 15 | return "VideoProcessorExample"; 16 | } 17 | 18 | /** 19 | * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and 20 | * you can specify the renderer you wish to use - the new renderer (Fabric) or the old renderer 21 | * (Paper). 22 | */ 23 | @Override 24 | protected ReactActivityDelegate createReactActivityDelegate() { 25 | return new MainActivityDelegate(this, getMainComponentName()); 26 | } 27 | 28 | public static class MainActivityDelegate extends ReactActivityDelegate { 29 | public MainActivityDelegate(ReactActivity activity, String mainComponentName) { 30 | super(activity, mainComponentName); 31 | } 32 | 33 | @Override 34 | protected ReactRootView createRootView() { 35 | ReactRootView reactRootView = new ReactRootView(getContext()); 36 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 37 | reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED); 38 | return reactRootView; 39 | } 40 | 41 | @Override 42 | protected boolean isConcurrentRootEnabled() { 43 | // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18). 44 | // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html 45 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/videoprocessorexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.videoprocessorexample; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.config.ReactFeatureFlags; 11 | import com.facebook.soloader.SoLoader; 12 | import com.videoprocessorexample.newarchitecture.MainApplicationReactNativeHost; 13 | import java.lang.reflect.InvocationTargetException; 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = 19 | new ReactNativeHost(this) { 20 | @Override 21 | public boolean getUseDeveloperSupport() { 22 | return BuildConfig.DEBUG; 23 | } 24 | 25 | @Override 26 | protected List getPackages() { 27 | @SuppressWarnings("UnnecessaryLocalVariable") 28 | List packages = new PackageList(this).getPackages(); 29 | // Packages that cannot be autolinked yet can be added manually here, for example: 30 | // packages.add(new MyReactNativePackage()); 31 | return packages; 32 | } 33 | 34 | @Override 35 | protected String getJSMainModuleName() { 36 | return "index"; 37 | } 38 | }; 39 | 40 | private final ReactNativeHost mNewArchitectureNativeHost = 41 | new MainApplicationReactNativeHost(this); 42 | 43 | @Override 44 | public ReactNativeHost getReactNativeHost() { 45 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 46 | return mNewArchitectureNativeHost; 47 | } else { 48 | return mReactNativeHost; 49 | } 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | // If you opted-in for the New Architecture, we enable the TurboModule system 56 | ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 57 | SoLoader.init(this, /* native exopackage */ false); 58 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 59 | } 60 | 61 | /** 62 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 63 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 64 | * 65 | * @param context 66 | * @param reactInstanceManager 67 | */ 68 | private static void initializeFlipper( 69 | Context context, ReactInstanceManager reactInstanceManager) { 70 | if (BuildConfig.DEBUG) { 71 | try { 72 | /* 73 | We use reflection here to pick up the class that initializes Flipper, 74 | since Flipper library is not available in release mode 75 | */ 76 | Class aClass = Class.forName("com.videoprocessorexample.ReactNativeFlipper"); 77 | aClass 78 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 79 | .invoke(null, context, reactInstanceManager); 80 | } catch (ClassNotFoundException e) { 81 | e.printStackTrace(); 82 | } catch (NoSuchMethodException e) { 83 | e.printStackTrace(); 84 | } catch (IllegalAccessException e) { 85 | e.printStackTrace(); 86 | } catch (InvocationTargetException e) { 87 | e.printStackTrace(); 88 | } 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/videoprocessorexample/newarchitecture/MainApplicationReactNativeHost.java: -------------------------------------------------------------------------------- 1 | package com.videoprocessorexample.newarchitecture; 2 | 3 | import android.app.Application; 4 | import androidx.annotation.NonNull; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactInstanceManager; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate; 10 | import com.facebook.react.bridge.JSIModulePackage; 11 | import com.facebook.react.bridge.JSIModuleProvider; 12 | import com.facebook.react.bridge.JSIModuleSpec; 13 | import com.facebook.react.bridge.JSIModuleType; 14 | import com.facebook.react.bridge.JavaScriptContextHolder; 15 | import com.facebook.react.bridge.ReactApplicationContext; 16 | import com.facebook.react.bridge.UIManager; 17 | import com.facebook.react.fabric.ComponentFactory; 18 | import com.facebook.react.fabric.CoreComponentsRegistry; 19 | import com.facebook.react.fabric.FabricJSIModuleProvider; 20 | import com.facebook.react.fabric.ReactNativeConfig; 21 | import com.facebook.react.uimanager.ViewManagerRegistry; 22 | import com.videoprocessorexample.BuildConfig; 23 | import com.videoprocessorexample.newarchitecture.components.MainComponentsRegistry; 24 | import com.videoprocessorexample.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate; 25 | import java.util.ArrayList; 26 | import java.util.List; 27 | 28 | /** 29 | * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both 30 | * TurboModule delegates and the Fabric Renderer. 31 | * 32 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 33 | * `newArchEnabled` property). Is ignored otherwise. 34 | */ 35 | public class MainApplicationReactNativeHost extends ReactNativeHost { 36 | public MainApplicationReactNativeHost(Application application) { 37 | super(application); 38 | } 39 | 40 | @Override 41 | public boolean getUseDeveloperSupport() { 42 | return BuildConfig.DEBUG; 43 | } 44 | 45 | @Override 46 | protected List getPackages() { 47 | List packages = new PackageList(this).getPackages(); 48 | // Packages that cannot be autolinked yet can be added manually here, for example: 49 | // packages.add(new MyReactNativePackage()); 50 | // TurboModules must also be loaded here providing a valid TurboReactPackage implementation: 51 | // packages.add(new TurboReactPackage() { ... }); 52 | // If you have custom Fabric Components, their ViewManagers should also be loaded here 53 | // inside a ReactPackage. 54 | return packages; 55 | } 56 | 57 | @Override 58 | protected String getJSMainModuleName() { 59 | return "index"; 60 | } 61 | 62 | @NonNull 63 | @Override 64 | protected ReactPackageTurboModuleManagerDelegate.Builder 65 | getReactPackageTurboModuleManagerDelegateBuilder() { 66 | // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary 67 | // for the new architecture and to use TurboModules correctly. 68 | return new MainApplicationTurboModuleManagerDelegate.Builder(); 69 | } 70 | 71 | @Override 72 | protected JSIModulePackage getJSIModulePackage() { 73 | return new JSIModulePackage() { 74 | @Override 75 | public List getJSIModules( 76 | final ReactApplicationContext reactApplicationContext, 77 | final JavaScriptContextHolder jsContext) { 78 | final List specs = new ArrayList<>(); 79 | 80 | // Here we provide a new JSIModuleSpec that will be responsible of providing the 81 | // custom Fabric Components. 82 | specs.add( 83 | new JSIModuleSpec() { 84 | @Override 85 | public JSIModuleType getJSIModuleType() { 86 | return JSIModuleType.UIManager; 87 | } 88 | 89 | @Override 90 | public JSIModuleProvider getJSIModuleProvider() { 91 | final ComponentFactory componentFactory = new ComponentFactory(); 92 | CoreComponentsRegistry.register(componentFactory); 93 | 94 | // Here we register a Components Registry. 95 | // The one that is generated with the template contains no components 96 | // and just provides you the one from React Native core. 97 | MainComponentsRegistry.register(componentFactory); 98 | 99 | final ReactInstanceManager reactInstanceManager = getReactInstanceManager(); 100 | 101 | ViewManagerRegistry viewManagerRegistry = 102 | new ViewManagerRegistry( 103 | reactInstanceManager.getOrCreateViewManagers(reactApplicationContext)); 104 | 105 | return new FabricJSIModuleProvider( 106 | reactApplicationContext, 107 | componentFactory, 108 | ReactNativeConfig.DEFAULT_CONFIG, 109 | viewManagerRegistry); 110 | } 111 | }); 112 | return specs; 113 | } 114 | }; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/videoprocessorexample/newarchitecture/components/MainComponentsRegistry.java: -------------------------------------------------------------------------------- 1 | package com.videoprocessorexample.newarchitecture.components; 2 | 3 | import com.facebook.jni.HybridData; 4 | import com.facebook.proguard.annotations.DoNotStrip; 5 | import com.facebook.react.fabric.ComponentFactory; 6 | import com.facebook.soloader.SoLoader; 7 | 8 | /** 9 | * Class responsible to load the custom Fabric Components. This class has native methods and needs a 10 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ 11 | * folder for you). 12 | * 13 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 14 | * `newArchEnabled` property). Is ignored otherwise. 15 | */ 16 | @DoNotStrip 17 | public class MainComponentsRegistry { 18 | static { 19 | SoLoader.loadLibrary("fabricjni"); 20 | } 21 | 22 | @DoNotStrip private final HybridData mHybridData; 23 | 24 | @DoNotStrip 25 | private native HybridData initHybrid(ComponentFactory componentFactory); 26 | 27 | @DoNotStrip 28 | private MainComponentsRegistry(ComponentFactory componentFactory) { 29 | mHybridData = initHybrid(componentFactory); 30 | } 31 | 32 | @DoNotStrip 33 | public static MainComponentsRegistry register(ComponentFactory componentFactory) { 34 | return new MainComponentsRegistry(componentFactory); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/videoprocessorexample/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java: -------------------------------------------------------------------------------- 1 | package com.videoprocessorexample.newarchitecture.modules; 2 | 3 | import com.facebook.jni.HybridData; 4 | import com.facebook.react.ReactPackage; 5 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.soloader.SoLoader; 8 | import java.util.List; 9 | 10 | /** 11 | * Class responsible to load the TurboModules. This class has native methods and needs a 12 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ 13 | * folder for you). 14 | * 15 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 16 | * `newArchEnabled` property). Is ignored otherwise. 17 | */ 18 | public class MainApplicationTurboModuleManagerDelegate 19 | extends ReactPackageTurboModuleManagerDelegate { 20 | 21 | private static volatile boolean sIsSoLibraryLoaded; 22 | 23 | protected MainApplicationTurboModuleManagerDelegate( 24 | ReactApplicationContext reactApplicationContext, List packages) { 25 | super(reactApplicationContext, packages); 26 | } 27 | 28 | protected native HybridData initHybrid(); 29 | 30 | native boolean canCreateTurboModule(String moduleName); 31 | 32 | public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder { 33 | protected MainApplicationTurboModuleManagerDelegate build( 34 | ReactApplicationContext context, List packages) { 35 | return new MainApplicationTurboModuleManagerDelegate(context, packages); 36 | } 37 | } 38 | 39 | @Override 40 | protected synchronized void maybeLoadOtherSoLibraries() { 41 | if (!sIsSoLibraryLoaded) { 42 | // If you change the name of your application .so file in the Android.mk file, 43 | // make sure you update the name here as well. 44 | SoLoader.loadLibrary("videoprocessorexample_appmodules"); 45 | sIsSoLibraryLoaded = true; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/CMakeLists.txt: -------------------------------------------------------------------------------- 1 | cmake_minimum_required(VERSION 3.13) 2 | 3 | # Define the library name here. 4 | project(videoprocessorexample_appmodules) 5 | 6 | # This file includes all the necessary to let you build your application with the New Architecture. 7 | include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake) 8 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainApplicationModuleProvider.cpp: -------------------------------------------------------------------------------- 1 | #include "MainApplicationModuleProvider.h" 2 | 3 | #include 4 | #include 5 | 6 | namespace facebook { 7 | namespace react { 8 | 9 | std::shared_ptr MainApplicationModuleProvider( 10 | const std::string &moduleName, 11 | const JavaTurboModule::InitParams ¶ms) { 12 | // Here you can provide your own module provider for TurboModules coming from 13 | // either your application or from external libraries. The approach to follow 14 | // is similar to the following (for a library called `samplelibrary`: 15 | // 16 | // auto module = samplelibrary_ModuleProvider(moduleName, params); 17 | // if (module != nullptr) { 18 | // return module; 19 | // } 20 | // return rncore_ModuleProvider(moduleName, params); 21 | 22 | // Module providers autolinked by RN CLI 23 | auto rncli_module = rncli_ModuleProvider(moduleName, params); 24 | if (rncli_module != nullptr) { 25 | return rncli_module; 26 | } 27 | 28 | return rncore_ModuleProvider(moduleName, params); 29 | } 30 | 31 | } // namespace react 32 | } // namespace facebook 33 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainApplicationModuleProvider.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | 6 | #include 7 | 8 | namespace facebook { 9 | namespace react { 10 | 11 | std::shared_ptr MainApplicationModuleProvider( 12 | const std::string &moduleName, 13 | const JavaTurboModule::InitParams ¶ms); 14 | 15 | } // namespace react 16 | } // namespace facebook 17 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp: -------------------------------------------------------------------------------- 1 | #include "MainApplicationTurboModuleManagerDelegate.h" 2 | #include "MainApplicationModuleProvider.h" 3 | 4 | namespace facebook { 5 | namespace react { 6 | 7 | jni::local_ref 8 | MainApplicationTurboModuleManagerDelegate::initHybrid( 9 | jni::alias_ref) { 10 | return makeCxxInstance(); 11 | } 12 | 13 | void MainApplicationTurboModuleManagerDelegate::registerNatives() { 14 | registerHybrid({ 15 | makeNativeMethod( 16 | "initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid), 17 | makeNativeMethod( 18 | "canCreateTurboModule", 19 | MainApplicationTurboModuleManagerDelegate::canCreateTurboModule), 20 | }); 21 | } 22 | 23 | std::shared_ptr 24 | MainApplicationTurboModuleManagerDelegate::getTurboModule( 25 | const std::string &name, 26 | const std::shared_ptr &jsInvoker) { 27 | // Not implemented yet: provide pure-C++ NativeModules here. 28 | return nullptr; 29 | } 30 | 31 | std::shared_ptr 32 | MainApplicationTurboModuleManagerDelegate::getTurboModule( 33 | const std::string &name, 34 | const JavaTurboModule::InitParams ¶ms) { 35 | return MainApplicationModuleProvider(name, params); 36 | } 37 | 38 | bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule( 39 | const std::string &name) { 40 | return getTurboModule(name, nullptr) != nullptr || 41 | getTurboModule(name, {.moduleName = name}) != nullptr; 42 | } 43 | 44 | } // namespace react 45 | } // namespace facebook 46 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | #include 5 | #include 6 | 7 | namespace facebook { 8 | namespace react { 9 | 10 | class MainApplicationTurboModuleManagerDelegate 11 | : public jni::HybridClass< 12 | MainApplicationTurboModuleManagerDelegate, 13 | TurboModuleManagerDelegate> { 14 | public: 15 | // Adapt it to the package you used for your Java class. 16 | static constexpr auto kJavaDescriptor = 17 | "Lcom/videoprocessorexample/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;"; 18 | 19 | static jni::local_ref initHybrid(jni::alias_ref); 20 | 21 | static void registerNatives(); 22 | 23 | std::shared_ptr getTurboModule( 24 | const std::string &name, 25 | const std::shared_ptr &jsInvoker) override; 26 | std::shared_ptr getTurboModule( 27 | const std::string &name, 28 | const JavaTurboModule::InitParams ¶ms) override; 29 | 30 | /** 31 | * Test-only method. Allows user to verify whether a TurboModule can be 32 | * created by instances of this class. 33 | */ 34 | bool canCreateTurboModule(const std::string &name); 35 | }; 36 | 37 | } // namespace react 38 | } // namespace facebook 39 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainComponentsRegistry.cpp: -------------------------------------------------------------------------------- 1 | #include "MainComponentsRegistry.h" 2 | 3 | #include 4 | #include 5 | #include 6 | #include 7 | #include 8 | 9 | namespace facebook { 10 | namespace react { 11 | 12 | MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {} 13 | 14 | std::shared_ptr 15 | MainComponentsRegistry::sharedProviderRegistry() { 16 | auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry(); 17 | 18 | // Autolinked providers registered by RN CLI 19 | rncli_registerProviders(providerRegistry); 20 | 21 | // Custom Fabric Components go here. You can register custom 22 | // components coming from your App or from 3rd party libraries here. 23 | // 24 | // providerRegistry->add(concreteComponentDescriptorProvider< 25 | // AocViewerComponentDescriptor>()); 26 | return providerRegistry; 27 | } 28 | 29 | jni::local_ref 30 | MainComponentsRegistry::initHybrid( 31 | jni::alias_ref, 32 | ComponentFactory *delegate) { 33 | auto instance = makeCxxInstance(delegate); 34 | 35 | auto buildRegistryFunction = 36 | [](EventDispatcher::Weak const &eventDispatcher, 37 | ContextContainer::Shared const &contextContainer) 38 | -> ComponentDescriptorRegistry::Shared { 39 | auto registry = MainComponentsRegistry::sharedProviderRegistry() 40 | ->createComponentDescriptorRegistry( 41 | {eventDispatcher, contextContainer}); 42 | 43 | auto mutableRegistry = 44 | std::const_pointer_cast(registry); 45 | 46 | mutableRegistry->setFallbackComponentDescriptor( 47 | std::make_shared( 48 | ComponentDescriptorParameters{ 49 | eventDispatcher, contextContainer, nullptr})); 50 | 51 | return registry; 52 | }; 53 | 54 | delegate->buildRegistryFunction = buildRegistryFunction; 55 | return instance; 56 | } 57 | 58 | void MainComponentsRegistry::registerNatives() { 59 | registerHybrid({ 60 | makeNativeMethod("initHybrid", MainComponentsRegistry::initHybrid), 61 | }); 62 | } 63 | 64 | } // namespace react 65 | } // namespace facebook 66 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainComponentsRegistry.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | #include 6 | #include 7 | 8 | namespace facebook { 9 | namespace react { 10 | 11 | class MainComponentsRegistry 12 | : public facebook::jni::HybridClass { 13 | public: 14 | // Adapt it to the package you used for your Java class. 15 | constexpr static auto kJavaDescriptor = 16 | "Lcom/videoprocessorexample/newarchitecture/components/MainComponentsRegistry;"; 17 | 18 | static void registerNatives(); 19 | 20 | MainComponentsRegistry(ComponentFactory *delegate); 21 | 22 | private: 23 | static std::shared_ptr 24 | sharedProviderRegistry(); 25 | 26 | static jni::local_ref initHybrid( 27 | jni::alias_ref, 28 | ComponentFactory *delegate); 29 | }; 30 | 31 | } // namespace react 32 | } // namespace facebook 33 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/OnLoad.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include "MainApplicationTurboModuleManagerDelegate.h" 3 | #include "MainComponentsRegistry.h" 4 | 5 | JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) { 6 | return facebook::jni::initialize(vm, [] { 7 | facebook::react::MainApplicationTurboModuleManagerDelegate:: 8 | registerNatives(); 9 | facebook::react::MainComponentsRegistry::registerNatives(); 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | VideoProcessorExample 3 | 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "31.0.0" 6 | minSdkVersion = 21 7 | compileSdkVersion = 31 8 | targetSdkVersion = 31 9 | 10 | ffmpegKitPackage = "full-gpl-lts" 11 | 12 | if (System.properties['os.arch'] == "aarch64") { 13 | // For M1 Users we need to use the NDK 24 which added support for aarch64 14 | ndkVersion = "24.0.8215888" 15 | } else { 16 | // Otherwise we default to the side-by-side NDK version from AGP. 17 | ndkVersion = "21.4.7075529" 18 | } 19 | } 20 | repositories { 21 | google() 22 | mavenCentral() 23 | } 24 | dependencies { 25 | classpath("com.android.tools.build:gradle:7.2.1") 26 | classpath("com.facebook.react:react-native-gradle-plugin") 27 | classpath("de.undercouch:gradle-download-task:5.0.1") 28 | // NOTE: Do not place your application dependencies here; they belong 29 | // in the individual module build.gradle files 30 | } 31 | } 32 | 33 | allprojects { 34 | repositories { 35 | maven { 36 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 37 | url("$rootDir/../node_modules/react-native/android") 38 | } 39 | maven { 40 | // Android JSC is installed from npm 41 | url("$rootDir/../node_modules/jsc-android/dist") 42 | } 43 | mavenCentral { 44 | // We don't want to fetch react-native from Maven Central as there are 45 | // older versions over there. 46 | content { 47 | excludeGroup "com.facebook.react" 48 | } 49 | } 50 | google() 51 | maven { url 'https://www.jitpack.io' } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.125.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salihgun/react-native-video-processor/a39f535065bc84f6a6511f4fbb841cfb17433bf1/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 84 | 85 | APP_NAME="Gradle" 86 | APP_BASE_NAME=${0##*/} 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | MAX_FD=$( ulimit -H -n ) || 147 | warn "Could not query maximum file descriptor limit" 148 | esac 149 | case $MAX_FD in #( 150 | '' | soft) :;; #( 151 | *) 152 | ulimit -n "$MAX_FD" || 153 | warn "Could not set maximum file descriptor limit to $MAX_FD" 154 | esac 155 | fi 156 | 157 | # Collect all arguments for the java command, stacking in reverse order: 158 | # * args from the command line 159 | # * the main class name 160 | # * -classpath 161 | # * -D...appname settings 162 | # * --module-path (only if needed) 163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 164 | 165 | # For Cygwin or MSYS, switch paths to Windows format before running java 166 | if "$cygwin" || "$msys" ; then 167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 169 | 170 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 171 | 172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 173 | for arg do 174 | if 175 | case $arg in #( 176 | -*) false ;; # don't mess with options #( 177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 178 | [ -e "$t" ] ;; #( 179 | *) false ;; 180 | esac 181 | then 182 | arg=$( cygpath --path --ignore --mixed "$arg" ) 183 | fi 184 | # Roll the args list around exactly as many times as the number of 185 | # args, so each arg winds up back in the position where it started, but 186 | # possibly modified. 187 | # 188 | # NB: a `for` loop captures its iteration list before it begins, so 189 | # changing the positional parameters here affects neither the number of 190 | # iterations, nor the values presented in `arg`. 191 | shift # remove old arg 192 | set -- "$@" "$arg" # push replacement arg 193 | done 194 | fi 195 | 196 | # Collect all arguments for the java command; 197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 198 | # shell script including quotes and variable substitutions, so put them in 199 | # double quotes to make sure that they get re-expanded; and 200 | # * put everything else in single quotes, so that it's not re-expanded. 201 | 202 | set -- \ 203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 204 | -classpath "$CLASSPATH" \ 205 | org.gradle.wrapper.GradleWrapperMain \ 206 | "$@" 207 | 208 | # Use "xargs" to parse quoted args. 209 | # 210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 211 | # 212 | # In Bash we could simply go: 213 | # 214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 215 | # set -- "${ARGS[@]}" "$@" 216 | # 217 | # but POSIX shell has neither arrays nor command substitution, so instead we 218 | # post-process each arg (as a line of input to sed) to backslash-escape any 219 | # character that might be a shell metacharacter, then use eval to reverse 220 | # that process (while maintaining the separation between arguments), and wrap 221 | # the whole thing up as a single "set" statement. 222 | # 223 | # This will of course break if any of these variables contains a newline or 224 | # an unmatched quote. 225 | # 226 | 227 | eval "set -- $( 228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 229 | xargs -n1 | 230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 231 | tr '\n' ' ' 232 | )" '"$@"' 233 | 234 | exec "$JAVACMD" "$@" 235 | -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'VideoProcessorExample' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/react-native-gradle-plugin') 5 | 6 | if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") { 7 | include(":ReactAndroid") 8 | project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid') 9 | include(":ReactAndroid:hermes-engine") 10 | project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine') 11 | } 12 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "VideoProcessorExample", 3 | "displayName": "VideoProcessorExample" 4 | } -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pak = require('../package.json'); 3 | 4 | module.exports = { 5 | presets: ['module:metro-react-native-babel-preset'], 6 | plugins: [ 7 | [ 8 | 'module-resolver', 9 | { 10 | extensions: ['.tsx', '.ts', '.js', '.json'], 11 | alias: { 12 | [pak.name]: path.join(__dirname, '..', pak.source), 13 | }, 14 | }, 15 | ], 16 | ], 17 | }; 18 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import App from './src/App'; 3 | import { name as appName } from './app.json'; 4 | 5 | AppRegistry.registerComponent(appName, () => App); 6 | -------------------------------------------------------------------------------- /example/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /example/ios/File.swift: -------------------------------------------------------------------------------- 1 | // 2 | // File.swift 3 | // VideoProcessorExample 4 | // 5 | 6 | import Foundation 7 | -------------------------------------------------------------------------------- /example/ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | platform :ios, '12.4' 5 | install! 'cocoapods', :deterministic_uuids => false 6 | 7 | target 'VideoProcessorExample' do 8 | config = use_native_modules! 9 | 10 | # Flags change depending on the env values. 11 | flags = get_default_flags() 12 | 13 | use_react_native!( 14 | :path => config[:reactNativePath], 15 | # Hermes is now enabled by default. Disable by setting this flag to false. 16 | # Upcoming versions of React Native may rely on get_default_flags(), but 17 | # we make it explicit here to aid in the React Native upgrade process. 18 | :hermes_enabled => true, 19 | :fabric_enabled => flags[:fabric_enabled], 20 | # Enables Flipper. 21 | # 22 | # Note that if you have use_frameworks! enabled, Flipper will not work and 23 | # you should disable the next line. 24 | :flipper_configuration => FlipperConfiguration.enabled, 25 | # An absolute path to your application root. 26 | :app_path => "#{Pod::Config.instance.installation_root}/.." 27 | ) 28 | 29 | target 'VideoProcessorExampleTests' do 30 | inherit! :complete 31 | # Pods for testing 32 | end 33 | 34 | post_install do |installer| 35 | react_native_post_install( 36 | installer, 37 | # Set `mac_catalyst_enabled` to `true` in order to apply patches 38 | # necessary for Mac Catalyst builds 39 | :mac_catalyst_enabled => false 40 | ) 41 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 42 | end 43 | end 44 | -------------------------------------------------------------------------------- /example/ios/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - boost (1.76.0) 3 | - CocoaAsyncSocket (7.6.5) 4 | - DoubleConversion (1.1.6) 5 | - FBLazyVector (0.70.5) 6 | - FBReactNativeSpec (0.70.5): 7 | - RCT-Folly (= 2021.07.22.00) 8 | - RCTRequired (= 0.70.5) 9 | - RCTTypeSafety (= 0.70.5) 10 | - React-Core (= 0.70.5) 11 | - React-jsi (= 0.70.5) 12 | - ReactCommon/turbomodule/core (= 0.70.5) 13 | - ffmpeg-kit-ios-https (5.1) 14 | - ffmpeg-kit-react-native (5.1.0): 15 | - ffmpeg-kit-react-native/https (= 5.1.0) 16 | - React-Core 17 | - ffmpeg-kit-react-native/https (5.1.0): 18 | - ffmpeg-kit-ios-https (= 5.1) 19 | - React-Core 20 | - Flipper (0.125.0): 21 | - Flipper-Folly (~> 2.6) 22 | - Flipper-RSocket (~> 1.4) 23 | - Flipper-Boost-iOSX (1.76.0.1.11) 24 | - Flipper-DoubleConversion (3.2.0.1) 25 | - Flipper-Fmt (7.1.7) 26 | - Flipper-Folly (2.6.10): 27 | - Flipper-Boost-iOSX 28 | - Flipper-DoubleConversion 29 | - Flipper-Fmt (= 7.1.7) 30 | - Flipper-Glog 31 | - libevent (~> 2.1.12) 32 | - OpenSSL-Universal (= 1.1.1100) 33 | - Flipper-Glog (0.5.0.5) 34 | - Flipper-PeerTalk (0.0.4) 35 | - Flipper-RSocket (1.4.3): 36 | - Flipper-Folly (~> 2.6) 37 | - FlipperKit (0.125.0): 38 | - FlipperKit/Core (= 0.125.0) 39 | - FlipperKit/Core (0.125.0): 40 | - Flipper (~> 0.125.0) 41 | - FlipperKit/CppBridge 42 | - FlipperKit/FBCxxFollyDynamicConvert 43 | - FlipperKit/FBDefines 44 | - FlipperKit/FKPortForwarding 45 | - SocketRocket (~> 0.6.0) 46 | - FlipperKit/CppBridge (0.125.0): 47 | - Flipper (~> 0.125.0) 48 | - FlipperKit/FBCxxFollyDynamicConvert (0.125.0): 49 | - Flipper-Folly (~> 2.6) 50 | - FlipperKit/FBDefines (0.125.0) 51 | - FlipperKit/FKPortForwarding (0.125.0): 52 | - CocoaAsyncSocket (~> 7.6) 53 | - Flipper-PeerTalk (~> 0.0.4) 54 | - FlipperKit/FlipperKitHighlightOverlay (0.125.0) 55 | - FlipperKit/FlipperKitLayoutHelpers (0.125.0): 56 | - FlipperKit/Core 57 | - FlipperKit/FlipperKitHighlightOverlay 58 | - FlipperKit/FlipperKitLayoutTextSearchable 59 | - FlipperKit/FlipperKitLayoutIOSDescriptors (0.125.0): 60 | - FlipperKit/Core 61 | - FlipperKit/FlipperKitHighlightOverlay 62 | - FlipperKit/FlipperKitLayoutHelpers 63 | - YogaKit (~> 1.18) 64 | - FlipperKit/FlipperKitLayoutPlugin (0.125.0): 65 | - FlipperKit/Core 66 | - FlipperKit/FlipperKitHighlightOverlay 67 | - FlipperKit/FlipperKitLayoutHelpers 68 | - FlipperKit/FlipperKitLayoutIOSDescriptors 69 | - FlipperKit/FlipperKitLayoutTextSearchable 70 | - YogaKit (~> 1.18) 71 | - FlipperKit/FlipperKitLayoutTextSearchable (0.125.0) 72 | - FlipperKit/FlipperKitNetworkPlugin (0.125.0): 73 | - FlipperKit/Core 74 | - FlipperKit/FlipperKitReactPlugin (0.125.0): 75 | - FlipperKit/Core 76 | - FlipperKit/FlipperKitUserDefaultsPlugin (0.125.0): 77 | - FlipperKit/Core 78 | - FlipperKit/SKIOSNetworkPlugin (0.125.0): 79 | - FlipperKit/Core 80 | - FlipperKit/FlipperKitNetworkPlugin 81 | - fmt (6.2.1) 82 | - glog (0.3.5) 83 | - hermes-engine (0.70.5) 84 | - libevent (2.1.12) 85 | - OpenSSL-Universal (1.1.1100) 86 | - RCT-Folly (2021.07.22.00): 87 | - boost 88 | - DoubleConversion 89 | - fmt (~> 6.2.1) 90 | - glog 91 | - RCT-Folly/Default (= 2021.07.22.00) 92 | - RCT-Folly/Default (2021.07.22.00): 93 | - boost 94 | - DoubleConversion 95 | - fmt (~> 6.2.1) 96 | - glog 97 | - RCT-Folly/Futures (2021.07.22.00): 98 | - boost 99 | - DoubleConversion 100 | - fmt (~> 6.2.1) 101 | - glog 102 | - libevent 103 | - RCTRequired (0.70.5) 104 | - RCTTypeSafety (0.70.5): 105 | - FBLazyVector (= 0.70.5) 106 | - RCTRequired (= 0.70.5) 107 | - React-Core (= 0.70.5) 108 | - React (0.70.5): 109 | - React-Core (= 0.70.5) 110 | - React-Core/DevSupport (= 0.70.5) 111 | - React-Core/RCTWebSocket (= 0.70.5) 112 | - React-RCTActionSheet (= 0.70.5) 113 | - React-RCTAnimation (= 0.70.5) 114 | - React-RCTBlob (= 0.70.5) 115 | - React-RCTImage (= 0.70.5) 116 | - React-RCTLinking (= 0.70.5) 117 | - React-RCTNetwork (= 0.70.5) 118 | - React-RCTSettings (= 0.70.5) 119 | - React-RCTText (= 0.70.5) 120 | - React-RCTVibration (= 0.70.5) 121 | - React-bridging (0.70.5): 122 | - RCT-Folly (= 2021.07.22.00) 123 | - React-jsi (= 0.70.5) 124 | - React-callinvoker (0.70.5) 125 | - React-Codegen (0.70.5): 126 | - FBReactNativeSpec (= 0.70.5) 127 | - RCT-Folly (= 2021.07.22.00) 128 | - RCTRequired (= 0.70.5) 129 | - RCTTypeSafety (= 0.70.5) 130 | - React-Core (= 0.70.5) 131 | - React-jsi (= 0.70.5) 132 | - React-jsiexecutor (= 0.70.5) 133 | - ReactCommon/turbomodule/core (= 0.70.5) 134 | - React-Core (0.70.5): 135 | - glog 136 | - RCT-Folly (= 2021.07.22.00) 137 | - React-Core/Default (= 0.70.5) 138 | - React-cxxreact (= 0.70.5) 139 | - React-jsi (= 0.70.5) 140 | - React-jsiexecutor (= 0.70.5) 141 | - React-perflogger (= 0.70.5) 142 | - Yoga 143 | - React-Core/CoreModulesHeaders (0.70.5): 144 | - glog 145 | - RCT-Folly (= 2021.07.22.00) 146 | - React-Core/Default 147 | - React-cxxreact (= 0.70.5) 148 | - React-jsi (= 0.70.5) 149 | - React-jsiexecutor (= 0.70.5) 150 | - React-perflogger (= 0.70.5) 151 | - Yoga 152 | - React-Core/Default (0.70.5): 153 | - glog 154 | - RCT-Folly (= 2021.07.22.00) 155 | - React-cxxreact (= 0.70.5) 156 | - React-jsi (= 0.70.5) 157 | - React-jsiexecutor (= 0.70.5) 158 | - React-perflogger (= 0.70.5) 159 | - Yoga 160 | - React-Core/DevSupport (0.70.5): 161 | - glog 162 | - RCT-Folly (= 2021.07.22.00) 163 | - React-Core/Default (= 0.70.5) 164 | - React-Core/RCTWebSocket (= 0.70.5) 165 | - React-cxxreact (= 0.70.5) 166 | - React-jsi (= 0.70.5) 167 | - React-jsiexecutor (= 0.70.5) 168 | - React-jsinspector (= 0.70.5) 169 | - React-perflogger (= 0.70.5) 170 | - Yoga 171 | - React-Core/RCTActionSheetHeaders (0.70.5): 172 | - glog 173 | - RCT-Folly (= 2021.07.22.00) 174 | - React-Core/Default 175 | - React-cxxreact (= 0.70.5) 176 | - React-jsi (= 0.70.5) 177 | - React-jsiexecutor (= 0.70.5) 178 | - React-perflogger (= 0.70.5) 179 | - Yoga 180 | - React-Core/RCTAnimationHeaders (0.70.5): 181 | - glog 182 | - RCT-Folly (= 2021.07.22.00) 183 | - React-Core/Default 184 | - React-cxxreact (= 0.70.5) 185 | - React-jsi (= 0.70.5) 186 | - React-jsiexecutor (= 0.70.5) 187 | - React-perflogger (= 0.70.5) 188 | - Yoga 189 | - React-Core/RCTBlobHeaders (0.70.5): 190 | - glog 191 | - RCT-Folly (= 2021.07.22.00) 192 | - React-Core/Default 193 | - React-cxxreact (= 0.70.5) 194 | - React-jsi (= 0.70.5) 195 | - React-jsiexecutor (= 0.70.5) 196 | - React-perflogger (= 0.70.5) 197 | - Yoga 198 | - React-Core/RCTImageHeaders (0.70.5): 199 | - glog 200 | - RCT-Folly (= 2021.07.22.00) 201 | - React-Core/Default 202 | - React-cxxreact (= 0.70.5) 203 | - React-jsi (= 0.70.5) 204 | - React-jsiexecutor (= 0.70.5) 205 | - React-perflogger (= 0.70.5) 206 | - Yoga 207 | - React-Core/RCTLinkingHeaders (0.70.5): 208 | - glog 209 | - RCT-Folly (= 2021.07.22.00) 210 | - React-Core/Default 211 | - React-cxxreact (= 0.70.5) 212 | - React-jsi (= 0.70.5) 213 | - React-jsiexecutor (= 0.70.5) 214 | - React-perflogger (= 0.70.5) 215 | - Yoga 216 | - React-Core/RCTNetworkHeaders (0.70.5): 217 | - glog 218 | - RCT-Folly (= 2021.07.22.00) 219 | - React-Core/Default 220 | - React-cxxreact (= 0.70.5) 221 | - React-jsi (= 0.70.5) 222 | - React-jsiexecutor (= 0.70.5) 223 | - React-perflogger (= 0.70.5) 224 | - Yoga 225 | - React-Core/RCTSettingsHeaders (0.70.5): 226 | - glog 227 | - RCT-Folly (= 2021.07.22.00) 228 | - React-Core/Default 229 | - React-cxxreact (= 0.70.5) 230 | - React-jsi (= 0.70.5) 231 | - React-jsiexecutor (= 0.70.5) 232 | - React-perflogger (= 0.70.5) 233 | - Yoga 234 | - React-Core/RCTTextHeaders (0.70.5): 235 | - glog 236 | - RCT-Folly (= 2021.07.22.00) 237 | - React-Core/Default 238 | - React-cxxreact (= 0.70.5) 239 | - React-jsi (= 0.70.5) 240 | - React-jsiexecutor (= 0.70.5) 241 | - React-perflogger (= 0.70.5) 242 | - Yoga 243 | - React-Core/RCTVibrationHeaders (0.70.5): 244 | - glog 245 | - RCT-Folly (= 2021.07.22.00) 246 | - React-Core/Default 247 | - React-cxxreact (= 0.70.5) 248 | - React-jsi (= 0.70.5) 249 | - React-jsiexecutor (= 0.70.5) 250 | - React-perflogger (= 0.70.5) 251 | - Yoga 252 | - React-Core/RCTWebSocket (0.70.5): 253 | - glog 254 | - RCT-Folly (= 2021.07.22.00) 255 | - React-Core/Default (= 0.70.5) 256 | - React-cxxreact (= 0.70.5) 257 | - React-jsi (= 0.70.5) 258 | - React-jsiexecutor (= 0.70.5) 259 | - React-perflogger (= 0.70.5) 260 | - Yoga 261 | - React-CoreModules (0.70.5): 262 | - RCT-Folly (= 2021.07.22.00) 263 | - RCTTypeSafety (= 0.70.5) 264 | - React-Codegen (= 0.70.5) 265 | - React-Core/CoreModulesHeaders (= 0.70.5) 266 | - React-jsi (= 0.70.5) 267 | - React-RCTImage (= 0.70.5) 268 | - ReactCommon/turbomodule/core (= 0.70.5) 269 | - React-cxxreact (0.70.5): 270 | - boost (= 1.76.0) 271 | - DoubleConversion 272 | - glog 273 | - RCT-Folly (= 2021.07.22.00) 274 | - React-callinvoker (= 0.70.5) 275 | - React-jsi (= 0.70.5) 276 | - React-jsinspector (= 0.70.5) 277 | - React-logger (= 0.70.5) 278 | - React-perflogger (= 0.70.5) 279 | - React-runtimeexecutor (= 0.70.5) 280 | - React-hermes (0.70.5): 281 | - DoubleConversion 282 | - glog 283 | - hermes-engine 284 | - RCT-Folly (= 2021.07.22.00) 285 | - RCT-Folly/Futures (= 2021.07.22.00) 286 | - React-cxxreact (= 0.70.5) 287 | - React-jsi (= 0.70.5) 288 | - React-jsiexecutor (= 0.70.5) 289 | - React-jsinspector (= 0.70.5) 290 | - React-perflogger (= 0.70.5) 291 | - React-jsi (0.70.5): 292 | - boost (= 1.76.0) 293 | - DoubleConversion 294 | - glog 295 | - RCT-Folly (= 2021.07.22.00) 296 | - React-jsi/Default (= 0.70.5) 297 | - React-jsi/Default (0.70.5): 298 | - boost (= 1.76.0) 299 | - DoubleConversion 300 | - glog 301 | - RCT-Folly (= 2021.07.22.00) 302 | - React-jsiexecutor (0.70.5): 303 | - DoubleConversion 304 | - glog 305 | - RCT-Folly (= 2021.07.22.00) 306 | - React-cxxreact (= 0.70.5) 307 | - React-jsi (= 0.70.5) 308 | - React-perflogger (= 0.70.5) 309 | - React-jsinspector (0.70.5) 310 | - React-logger (0.70.5): 311 | - glog 312 | - react-native-video (5.2.1): 313 | - React-Core 314 | - react-native-video/Video (= 5.2.1) 315 | - react-native-video/Video (5.2.1): 316 | - React-Core 317 | - React-perflogger (0.70.5) 318 | - React-RCTActionSheet (0.70.5): 319 | - React-Core/RCTActionSheetHeaders (= 0.70.5) 320 | - React-RCTAnimation (0.70.5): 321 | - RCT-Folly (= 2021.07.22.00) 322 | - RCTTypeSafety (= 0.70.5) 323 | - React-Codegen (= 0.70.5) 324 | - React-Core/RCTAnimationHeaders (= 0.70.5) 325 | - React-jsi (= 0.70.5) 326 | - ReactCommon/turbomodule/core (= 0.70.5) 327 | - React-RCTBlob (0.70.5): 328 | - RCT-Folly (= 2021.07.22.00) 329 | - React-Codegen (= 0.70.5) 330 | - React-Core/RCTBlobHeaders (= 0.70.5) 331 | - React-Core/RCTWebSocket (= 0.70.5) 332 | - React-jsi (= 0.70.5) 333 | - React-RCTNetwork (= 0.70.5) 334 | - ReactCommon/turbomodule/core (= 0.70.5) 335 | - React-RCTImage (0.70.5): 336 | - RCT-Folly (= 2021.07.22.00) 337 | - RCTTypeSafety (= 0.70.5) 338 | - React-Codegen (= 0.70.5) 339 | - React-Core/RCTImageHeaders (= 0.70.5) 340 | - React-jsi (= 0.70.5) 341 | - React-RCTNetwork (= 0.70.5) 342 | - ReactCommon/turbomodule/core (= 0.70.5) 343 | - React-RCTLinking (0.70.5): 344 | - React-Codegen (= 0.70.5) 345 | - React-Core/RCTLinkingHeaders (= 0.70.5) 346 | - React-jsi (= 0.70.5) 347 | - ReactCommon/turbomodule/core (= 0.70.5) 348 | - React-RCTNetwork (0.70.5): 349 | - RCT-Folly (= 2021.07.22.00) 350 | - RCTTypeSafety (= 0.70.5) 351 | - React-Codegen (= 0.70.5) 352 | - React-Core/RCTNetworkHeaders (= 0.70.5) 353 | - React-jsi (= 0.70.5) 354 | - ReactCommon/turbomodule/core (= 0.70.5) 355 | - React-RCTSettings (0.70.5): 356 | - RCT-Folly (= 2021.07.22.00) 357 | - RCTTypeSafety (= 0.70.5) 358 | - React-Codegen (= 0.70.5) 359 | - React-Core/RCTSettingsHeaders (= 0.70.5) 360 | - React-jsi (= 0.70.5) 361 | - ReactCommon/turbomodule/core (= 0.70.5) 362 | - React-RCTText (0.70.5): 363 | - React-Core/RCTTextHeaders (= 0.70.5) 364 | - React-RCTVibration (0.70.5): 365 | - RCT-Folly (= 2021.07.22.00) 366 | - React-Codegen (= 0.70.5) 367 | - React-Core/RCTVibrationHeaders (= 0.70.5) 368 | - React-jsi (= 0.70.5) 369 | - ReactCommon/turbomodule/core (= 0.70.5) 370 | - React-runtimeexecutor (0.70.5): 371 | - React-jsi (= 0.70.5) 372 | - ReactCommon/turbomodule/core (0.70.5): 373 | - DoubleConversion 374 | - glog 375 | - RCT-Folly (= 2021.07.22.00) 376 | - React-bridging (= 0.70.5) 377 | - React-callinvoker (= 0.70.5) 378 | - React-Core (= 0.70.5) 379 | - React-cxxreact (= 0.70.5) 380 | - React-jsi (= 0.70.5) 381 | - React-logger (= 0.70.5) 382 | - React-perflogger (= 0.70.5) 383 | - RNFS (2.20.0): 384 | - React-Core 385 | - RNImageCropPicker (0.38.1): 386 | - React-Core 387 | - React-RCTImage 388 | - RNImageCropPicker/QBImagePickerController (= 0.38.1) 389 | - TOCropViewController 390 | - RNImageCropPicker/QBImagePickerController (0.38.1): 391 | - React-Core 392 | - React-RCTImage 393 | - TOCropViewController 394 | - SocketRocket (0.6.0) 395 | - TOCropViewController (2.6.1) 396 | - Yoga (1.14.0) 397 | - YogaKit (1.18.1): 398 | - Yoga (~> 1.14) 399 | 400 | DEPENDENCIES: 401 | - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`) 402 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) 403 | - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) 404 | - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`) 405 | - ffmpeg-kit-react-native (from `../node_modules/ffmpeg-kit-react-native`) 406 | - Flipper (= 0.125.0) 407 | - Flipper-Boost-iOSX (= 1.76.0.1.11) 408 | - Flipper-DoubleConversion (= 3.2.0.1) 409 | - Flipper-Fmt (= 7.1.7) 410 | - Flipper-Folly (= 2.6.10) 411 | - Flipper-Glog (= 0.5.0.5) 412 | - Flipper-PeerTalk (= 0.0.4) 413 | - Flipper-RSocket (= 1.4.3) 414 | - FlipperKit (= 0.125.0) 415 | - FlipperKit/Core (= 0.125.0) 416 | - FlipperKit/CppBridge (= 0.125.0) 417 | - FlipperKit/FBCxxFollyDynamicConvert (= 0.125.0) 418 | - FlipperKit/FBDefines (= 0.125.0) 419 | - FlipperKit/FKPortForwarding (= 0.125.0) 420 | - FlipperKit/FlipperKitHighlightOverlay (= 0.125.0) 421 | - FlipperKit/FlipperKitLayoutPlugin (= 0.125.0) 422 | - FlipperKit/FlipperKitLayoutTextSearchable (= 0.125.0) 423 | - FlipperKit/FlipperKitNetworkPlugin (= 0.125.0) 424 | - FlipperKit/FlipperKitReactPlugin (= 0.125.0) 425 | - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.125.0) 426 | - FlipperKit/SKIOSNetworkPlugin (= 0.125.0) 427 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) 428 | - hermes-engine (from `../node_modules/react-native/sdks/hermes/hermes-engine.podspec`) 429 | - libevent (~> 2.1.12) 430 | - OpenSSL-Universal (= 1.1.1100) 431 | - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) 432 | - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`) 433 | - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) 434 | - React (from `../node_modules/react-native/`) 435 | - React-bridging (from `../node_modules/react-native/ReactCommon`) 436 | - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`) 437 | - React-Codegen (from `build/generated/ios`) 438 | - React-Core (from `../node_modules/react-native/`) 439 | - React-Core/DevSupport (from `../node_modules/react-native/`) 440 | - React-Core/RCTWebSocket (from `../node_modules/react-native/`) 441 | - React-CoreModules (from `../node_modules/react-native/React/CoreModules`) 442 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) 443 | - React-hermes (from `../node_modules/react-native/ReactCommon/hermes`) 444 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) 445 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) 446 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) 447 | - React-logger (from `../node_modules/react-native/ReactCommon/logger`) 448 | - react-native-video (from `../node_modules/react-native-video`) 449 | - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) 450 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) 451 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) 452 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) 453 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`) 454 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`) 455 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`) 456 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`) 457 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`) 458 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) 459 | - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) 460 | - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) 461 | - RNFS (from `../node_modules/react-native-fs`) 462 | - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`) 463 | - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) 464 | 465 | SPEC REPOS: 466 | trunk: 467 | - CocoaAsyncSocket 468 | - ffmpeg-kit-ios-https 469 | - Flipper 470 | - Flipper-Boost-iOSX 471 | - Flipper-DoubleConversion 472 | - Flipper-Fmt 473 | - Flipper-Folly 474 | - Flipper-Glog 475 | - Flipper-PeerTalk 476 | - Flipper-RSocket 477 | - FlipperKit 478 | - fmt 479 | - libevent 480 | - OpenSSL-Universal 481 | - SocketRocket 482 | - TOCropViewController 483 | - YogaKit 484 | 485 | EXTERNAL SOURCES: 486 | boost: 487 | :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec" 488 | DoubleConversion: 489 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" 490 | FBLazyVector: 491 | :path: "../node_modules/react-native/Libraries/FBLazyVector" 492 | FBReactNativeSpec: 493 | :path: "../node_modules/react-native/React/FBReactNativeSpec" 494 | ffmpeg-kit-react-native: 495 | :path: "../node_modules/ffmpeg-kit-react-native" 496 | glog: 497 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" 498 | hermes-engine: 499 | :podspec: "../node_modules/react-native/sdks/hermes/hermes-engine.podspec" 500 | RCT-Folly: 501 | :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec" 502 | RCTRequired: 503 | :path: "../node_modules/react-native/Libraries/RCTRequired" 504 | RCTTypeSafety: 505 | :path: "../node_modules/react-native/Libraries/TypeSafety" 506 | React: 507 | :path: "../node_modules/react-native/" 508 | React-bridging: 509 | :path: "../node_modules/react-native/ReactCommon" 510 | React-callinvoker: 511 | :path: "../node_modules/react-native/ReactCommon/callinvoker" 512 | React-Codegen: 513 | :path: build/generated/ios 514 | React-Core: 515 | :path: "../node_modules/react-native/" 516 | React-CoreModules: 517 | :path: "../node_modules/react-native/React/CoreModules" 518 | React-cxxreact: 519 | :path: "../node_modules/react-native/ReactCommon/cxxreact" 520 | React-hermes: 521 | :path: "../node_modules/react-native/ReactCommon/hermes" 522 | React-jsi: 523 | :path: "../node_modules/react-native/ReactCommon/jsi" 524 | React-jsiexecutor: 525 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor" 526 | React-jsinspector: 527 | :path: "../node_modules/react-native/ReactCommon/jsinspector" 528 | React-logger: 529 | :path: "../node_modules/react-native/ReactCommon/logger" 530 | react-native-video: 531 | :path: "../node_modules/react-native-video" 532 | React-perflogger: 533 | :path: "../node_modules/react-native/ReactCommon/reactperflogger" 534 | React-RCTActionSheet: 535 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS" 536 | React-RCTAnimation: 537 | :path: "../node_modules/react-native/Libraries/NativeAnimation" 538 | React-RCTBlob: 539 | :path: "../node_modules/react-native/Libraries/Blob" 540 | React-RCTImage: 541 | :path: "../node_modules/react-native/Libraries/Image" 542 | React-RCTLinking: 543 | :path: "../node_modules/react-native/Libraries/LinkingIOS" 544 | React-RCTNetwork: 545 | :path: "../node_modules/react-native/Libraries/Network" 546 | React-RCTSettings: 547 | :path: "../node_modules/react-native/Libraries/Settings" 548 | React-RCTText: 549 | :path: "../node_modules/react-native/Libraries/Text" 550 | React-RCTVibration: 551 | :path: "../node_modules/react-native/Libraries/Vibration" 552 | React-runtimeexecutor: 553 | :path: "../node_modules/react-native/ReactCommon/runtimeexecutor" 554 | ReactCommon: 555 | :path: "../node_modules/react-native/ReactCommon" 556 | RNFS: 557 | :path: "../node_modules/react-native-fs" 558 | RNImageCropPicker: 559 | :path: "../node_modules/react-native-image-crop-picker" 560 | Yoga: 561 | :path: "../node_modules/react-native/ReactCommon/yoga" 562 | 563 | SPEC CHECKSUMS: 564 | boost: a7c83b31436843459a1961bfd74b96033dc77234 565 | CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 566 | DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 567 | FBLazyVector: affa4ba1bfdaac110a789192f4d452b053a86624 568 | FBReactNativeSpec: fe8b5f1429cfe83a8d72dc8ed61dc7704cac8745 569 | ffmpeg-kit-ios-https: 8dffbe1623a2f227be98fc314294847a97f818e4 570 | ffmpeg-kit-react-native: 56ecfcd21536379dd123eade87c3b6fd55f12030 571 | Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0 572 | Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c 573 | Flipper-DoubleConversion: 2dc99b02f658daf147069aad9dbd29d8feb06d30 574 | Flipper-Fmt: 60cbdd92fc254826e61d669a5d87ef7015396a9b 575 | Flipper-Folly: 584845625005ff068a6ebf41f857f468decd26b3 576 | Flipper-Glog: 70c50ce58ddaf67dc35180db05f191692570f446 577 | Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9 578 | Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541 579 | FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86 580 | fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 581 | glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b 582 | hermes-engine: 7fe5fc6ef707b7fdcb161b63898ec500e285653d 583 | libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 584 | OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c 585 | RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda 586 | RCTRequired: 21229f84411088e5d8538f21212de49e46cc83e2 587 | RCTTypeSafety: 62eed57a32924b09edaaf170a548d1fc96223086 588 | React: f0254ccddeeef1defe66c6b1bb9133a4f040792b 589 | React-bridging: e46911666b7ec19538a620a221d6396cd293d687 590 | React-callinvoker: 66b62e2c34546546b2f21ab0b7670346410a2b53 591 | React-Codegen: b6999435966df3bdf82afa3f319ba0d6f9a8532a 592 | React-Core: dabbc9d1fe0a11d884e6ee1599789cf8eb1058a5 593 | React-CoreModules: 5b6b7668f156f73a56420df9ec68ca2ec8f2e818 594 | React-cxxreact: c7ca2baee46db22a30fce9e639277add3c3f6ad1 595 | React-hermes: c93e1d759ad5560dfea54d233013d7d2c725c286 596 | React-jsi: a565dcb49130ed20877a9bb1105ffeecbb93d02d 597 | React-jsiexecutor: 31564fa6912459921568e8b0e49024285a4d584b 598 | React-jsinspector: badd81696361249893a80477983e697aab3c1a34 599 | React-logger: fdda34dd285bdb0232e059b19d9606fa0ec3bb9c 600 | react-native-video: c26780b224543c62d5e1b2a7244a5cd1b50e8253 601 | React-perflogger: e68d3795cf5d247a0379735cbac7309adf2fb931 602 | React-RCTActionSheet: 05452c3b281edb27850253db13ecd4c5a65bc247 603 | React-RCTAnimation: 578eebac706428e68466118e84aeacf3a282b4da 604 | React-RCTBlob: f47a0aa61e7d1fb1a0e13da832b0da934939d71a 605 | React-RCTImage: 60f54b66eed65d86b6dffaf4733d09161d44929d 606 | React-RCTLinking: 91073205aeec4b29450ca79b709277319368ac9e 607 | React-RCTNetwork: ca91f2c9465a7e335c8a5fae731fd7f10572213b 608 | React-RCTSettings: 1a9a5d01337d55c18168c1abe0f4a589167d134a 609 | React-RCTText: c591e8bd9347a294d8416357ca12d779afec01d5 610 | React-RCTVibration: 8e5c8c5d17af641f306d7380d8d0fe9b3c142c48 611 | React-runtimeexecutor: 7401c4a40f8728fd89df4a56104541b760876117 612 | ReactCommon: c9246996e73bf75a2c6c3ff15f1e16707cdc2da9 613 | RNFS: 4ac0f0ea233904cb798630b3c077808c06931688 614 | RNImageCropPicker: 648356d68fbf9911a1016b3e3723885d28373eda 615 | SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608 616 | TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863 617 | Yoga: eca980a5771bf114c41a754098cd85e6e0d90ed7 618 | YogaKit: f782866e155069a2cca2517aafea43200b01fd5a 619 | 620 | PODFILE CHECKSUM: c5bfadd4edceb87f8513ad077b40375ac4469827 621 | 622 | COCOAPODS: 1.11.3 623 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExample-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | // 2 | // Use this file to import your target's public headers that you would like to expose to Swift. 3 | // 4 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExample.xcodeproj/xcshareddata/xcschemes/VideoProcessorExample.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExample/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #import 8 | 9 | #if RCT_NEW_ARCH_ENABLED 10 | #import 11 | #import 12 | #import 13 | #import 14 | #import 15 | #import 16 | 17 | #import 18 | 19 | static NSString *const kRNConcurrentRoot = @"concurrentRoot"; 20 | 21 | @interface AppDelegate () { 22 | RCTTurboModuleManager *_turboModuleManager; 23 | RCTSurfacePresenterBridgeAdapter *_bridgeAdapter; 24 | std::shared_ptr _reactNativeConfig; 25 | facebook::react::ContextContainer::Shared _contextContainer; 26 | } 27 | @end 28 | #endif 29 | 30 | @implementation AppDelegate 31 | 32 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 33 | { 34 | RCTAppSetupPrepareApp(application); 35 | 36 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 37 | 38 | #if RCT_NEW_ARCH_ENABLED 39 | _contextContainer = std::make_shared(); 40 | _reactNativeConfig = std::make_shared(); 41 | _contextContainer->insert("ReactNativeConfig", _reactNativeConfig); 42 | _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer]; 43 | bridge.surfacePresenter = _bridgeAdapter.surfacePresenter; 44 | #endif 45 | 46 | NSDictionary *initProps = [self prepareInitialProps]; 47 | UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"VideoProcessorExample", initProps); 48 | 49 | if (@available(iOS 13.0, *)) { 50 | rootView.backgroundColor = [UIColor systemBackgroundColor]; 51 | } else { 52 | rootView.backgroundColor = [UIColor whiteColor]; 53 | } 54 | 55 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 56 | UIViewController *rootViewController = [UIViewController new]; 57 | rootViewController.view = rootView; 58 | self.window.rootViewController = rootViewController; 59 | [self.window makeKeyAndVisible]; 60 | return YES; 61 | } 62 | 63 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off. 64 | /// 65 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html 66 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture). 67 | /// @return: `true` if the `concurrentRoot` feture is enabled. Otherwise, it returns `false`. 68 | - (BOOL)concurrentRootEnabled 69 | { 70 | // Switch this bool to turn on and off the concurrent root 71 | return true; 72 | } 73 | 74 | - (NSDictionary *)prepareInitialProps 75 | { 76 | NSMutableDictionary *initProps = [NSMutableDictionary new]; 77 | 78 | #ifdef RCT_NEW_ARCH_ENABLED 79 | initProps[kRNConcurrentRoot] = @([self concurrentRootEnabled]); 80 | #endif 81 | 82 | return initProps; 83 | } 84 | 85 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 86 | { 87 | #if DEBUG 88 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 89 | #else 90 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 91 | #endif 92 | } 93 | 94 | #if RCT_NEW_ARCH_ENABLED 95 | 96 | #pragma mark - RCTCxxBridgeDelegate 97 | 98 | - (std::unique_ptr)jsExecutorFactoryForBridge:(RCTBridge *)bridge 99 | { 100 | _turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge 101 | delegate:self 102 | jsInvoker:bridge.jsCallInvoker]; 103 | return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager); 104 | } 105 | 106 | #pragma mark RCTTurboModuleManagerDelegate 107 | 108 | - (Class)getModuleClassFromName:(const char *)name 109 | { 110 | return RCTCoreModulesClassProvider(name); 111 | } 112 | 113 | - (std::shared_ptr)getTurboModule:(const std::string &)name 114 | jsInvoker:(std::shared_ptr)jsInvoker 115 | { 116 | return nullptr; 117 | } 118 | 119 | - (std::shared_ptr)getTurboModule:(const std::string &)name 120 | initParams: 121 | (const facebook::react::ObjCTurboModule::InitParams &)params 122 | { 123 | return nullptr; 124 | } 125 | 126 | - (id)getModuleInstanceFromClass:(Class)moduleClass 127 | { 128 | return RCTAppSetupDefaultModuleFromClass(moduleClass); 129 | } 130 | 131 | #endif 132 | 133 | @end 134 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | VideoProcessorExample 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | NSPhotoLibraryUsageDescription 41 | 42 | UILaunchStoryboardName 43 | LaunchScreen 44 | UIRequiredDeviceCapabilities 45 | 46 | armv7 47 | 48 | UISupportedInterfaceOrientations 49 | 50 | UIInterfaceOrientationPortrait 51 | UIInterfaceOrientationLandscapeLeft 52 | UIInterfaceOrientationLandscapeRight 53 | 54 | UIViewControllerBasedStatusBarAppearance 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExample/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExample/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/ios/VideoProcessorExampleTests/VideoProcessorExampleTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface VideoProcessorExampleTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation VideoProcessorExampleTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const escape = require('escape-string-regexp'); 3 | const exclusionList = require('metro-config/src/defaults/exclusionList'); 4 | const pak = require('../package.json'); 5 | 6 | const root = path.resolve(__dirname, '..'); 7 | 8 | const modules = Object.keys({ 9 | ...pak.peerDependencies, 10 | }); 11 | 12 | module.exports = { 13 | projectRoot: __dirname, 14 | watchFolders: [root], 15 | 16 | // We need to make sure that only one version is loaded for peerDependencies 17 | // So we block them at the root, and alias them to the versions in example's node_modules 18 | resolver: { 19 | blacklistRE: exclusionList( 20 | modules.map( 21 | (m) => 22 | new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`) 23 | ) 24 | ), 25 | 26 | extraNodeModules: modules.reduce((acc, name) => { 27 | acc[name] = path.join(__dirname, 'node_modules', name); 28 | return acc; 29 | }, {}), 30 | }, 31 | 32 | transformer: { 33 | getTransformOptions: async () => ({ 34 | transform: { 35 | experimentalImportSupport: false, 36 | inlineRequires: true, 37 | }, 38 | }), 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "VideoProcessorExample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "pods": "pod-install --quiet" 10 | }, 11 | "dependencies": { 12 | "ffmpeg-kit-react-native": "^5.1.0", 13 | "moment": "^2.29.4", 14 | "react": "18.1.0", 15 | "react-native": "0.70.5", 16 | "react-native-fs": "^2.20.0", 17 | "react-native-image-crop-picker": "^0.38.1", 18 | "react-native-video": "^5.2.1" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.12.9", 22 | "@babel/runtime": "^7.12.5", 23 | "@types/react-native-video": "^5.0.14", 24 | "babel-plugin-module-resolver": "^4.1.0", 25 | "metro-react-native-babel-preset": "0.72.3" 26 | }, 27 | "peerDependencies": {} 28 | } 29 | -------------------------------------------------------------------------------- /example/src/App.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | StyleSheet, 4 | View, 5 | Text, 6 | Pressable, 7 | Image, 8 | TextInput, 9 | ScrollView, 10 | Modal, 11 | ActivityIndicator, 12 | Dimensions, 13 | } from 'react-native'; 14 | import VideoManager from '@salihgun/react-native-video-processor'; 15 | import ImagePicker from 'react-native-image-crop-picker'; 16 | import Video from 'react-native-video'; 17 | import RNFS from 'react-native-fs'; 18 | const width = Dimensions.get('window').width; 19 | export default function App() { 20 | const [videoInfo, setVideoInfo] = React.useState({ 21 | duration: 0, 22 | creationDate: '', 23 | size: 0, 24 | width: 0, 25 | height: 0, 26 | bit_rate: 0, 27 | codec_name: '', 28 | codec_type: '', 29 | sample_aspect_ratio: '', 30 | frame_rate: '', 31 | }); 32 | const [thumbnail, setThumbnail] = React.useState(''); 33 | const [startTime, setStartTime] = React.useState(''); 34 | const [duration, setDuration] = React.useState(''); 35 | const [videoPath, setVideoPath] = React.useState(''); 36 | const [framesPath, setFramesPath] = React.useState(''); 37 | const [reversedVideoPath, setReversedVideoPath] = React.useState(''); 38 | const [mergedVideoPath, setMergedVideoPath] = React.useState(''); 39 | // const [newPath, setNewPath] = React.useState(''); 40 | // const [value, setValue] = React.useState(0); 41 | const [speedPath, setSpeedPath] = React.useState(''); 42 | const [boomerangVideoPath, setBoomerangVideoPath] = React.useState(''); 43 | const [loading, setLoading] = React.useState(false); 44 | const onPickVideo = async () => { 45 | const video = await ImagePicker.openPicker({ 46 | mediaType: 'video', 47 | multiple: true, 48 | }); 49 | const paths = video.map((item) => item.path); 50 | setLoading(true); 51 | const videoInfoResponse = await VideoManager.getVideoInfo(video[0]?.path); 52 | const videoThumbnail = await VideoManager.createThumbnail(video[0]?.path); 53 | const framePath = await VideoManager.createFrames(video[0]?.path, 5); 54 | const clippedVideo = await VideoManager.trimVideo( 55 | video[0]?.path, 56 | startTime, 57 | duration 58 | ); 59 | const reversedVideo = await VideoManager.reverseVideo(clippedVideo); 60 | const newVideoPath = RNFS.DocumentDirectoryPath + '/newVideo.mp4'; 61 | const mergedVideo = await VideoManager.mergeVideos(paths, newVideoPath); 62 | const boomerangVideo = await VideoManager.boomerang(video[0]?.path, true); 63 | const speedVideo = await VideoManager.setSpeed(video[0]?.path, 4); 64 | setSpeedPath(speedVideo); 65 | setBoomerangVideoPath(boomerangVideo); 66 | setMergedVideoPath(mergedVideo); 67 | setReversedVideoPath(reversedVideo); 68 | setVideoPath(clippedVideo); 69 | setThumbnail(videoThumbnail); 70 | setVideoInfo(videoInfoResponse); 71 | setFramesPath(framePath); 72 | setLoading(false); 73 | // setNewPath(video[0]?.path as string); 74 | }; 75 | return React.createElement( 76 | View, 77 | { style: styles.container }, 78 | React.createElement( 79 | ScrollView, 80 | { 81 | showsVerticalScrollIndicator: false, 82 | contentContainerStyle: styles.scrollContainer, 83 | }, 84 | React.createElement( 85 | Pressable, 86 | { style: styles.buttonContainer, onPress: onPickVideo }, 87 | React.createElement(Text, null, 'Choose Video') 88 | ), 89 | React.createElement( 90 | View, 91 | { style: styles.inputContainer }, 92 | React.createElement(Text, null, 'Start time:'), 93 | React.createElement(TextInput, { 94 | style: styles.input, 95 | value: startTime, 96 | onChangeText: setStartTime, 97 | }) 98 | ), 99 | React.createElement( 100 | View, 101 | { style: styles.inputContainer }, 102 | React.createElement(Text, null, 'Clip duration:'), 103 | React.createElement(TextInput, { 104 | style: styles.input, 105 | value: duration, 106 | onChangeText: setDuration, 107 | }) 108 | ), 109 | React.createElement( 110 | Text, 111 | { style: styles.text }, 112 | 'Duration: ', 113 | videoInfo.duration.toFixed(2), 114 | ' seconds' 115 | ), 116 | React.createElement( 117 | Text, 118 | { style: styles.text }, 119 | 'Creation Date: ', 120 | videoInfo.creationDate 121 | ), 122 | React.createElement( 123 | Text, 124 | { style: styles.text }, 125 | 'Size: ', 126 | videoInfo.size, 127 | ' bytes' 128 | ), 129 | React.createElement(Text, { style: styles.title }, 'Thumbnail'), 130 | thumbnail !== '' && 131 | React.createElement(Image, { 132 | style: styles.thumbnail, 133 | source: { uri: thumbnail }, 134 | }), 135 | React.createElement(Text, { style: styles.title }, 'Clipped Video'), 136 | videoPath !== '' && 137 | React.createElement(Video, { 138 | source: { uri: videoPath }, 139 | style: styles.video, 140 | resizeMode: 'contain', 141 | paused: false, 142 | repeat: true, 143 | }), 144 | React.createElement(Text, { style: styles.title }, 'Frames'), 145 | framesPath && 146 | React.createElement( 147 | ScrollView, 148 | { 149 | horizontal: true, 150 | contentContainerStyle: styles.framesScrollContainer, 151 | }, 152 | [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((_, index) => { 153 | return React.createElement(Image, { 154 | key: index, 155 | style: styles.frame, 156 | source: { uri: `${framesPath}${index + 1}.jpg` }, 157 | }); 158 | }) 159 | ), 160 | React.createElement(Text, { style: styles.title }, 'Reversed Video'), 161 | reversedVideoPath !== '' && 162 | React.createElement(Video, { 163 | source: { uri: reversedVideoPath }, 164 | style: styles.video, 165 | resizeMode: 'contain', 166 | paused: false, 167 | repeat: true, 168 | }), 169 | React.createElement(Text, { style: styles.title }, 'Merged Video'), 170 | mergedVideoPath !== '' && 171 | React.createElement(Video, { 172 | source: { uri: mergedVideoPath }, 173 | style: styles.video, 174 | resizeMode: 'contain', 175 | paused: false, 176 | repeat: true, 177 | }), 178 | React.createElement(Text, { style: styles.title }, 'Boomerang Video'), 179 | boomerangVideoPath !== '' && 180 | React.createElement(Video, { 181 | source: { uri: boomerangVideoPath }, 182 | style: styles.video, 183 | resizeMode: 'contain', 184 | paused: false, 185 | repeat: true, 186 | }), 187 | React.createElement(Text, { style: styles.title }, 'Speed Video'), 188 | speedPath !== '' && 189 | React.createElement(Video, { 190 | source: { uri: speedPath }, 191 | style: styles.video, 192 | resizeMode: 'contain', 193 | paused: false, 194 | repeat: true, 195 | }) 196 | ), 197 | React.createElement( 198 | Modal, 199 | { transparent: true, visible: loading }, 200 | React.createElement( 201 | View, 202 | { style: styles.modal }, 203 | React.createElement(ActivityIndicator, { size: 50 }) 204 | ) 205 | ) 206 | ); 207 | } 208 | const styles = StyleSheet.create({ 209 | container: { 210 | flex: 1, 211 | alignItems: 'center', 212 | justifyContent: 'center', 213 | backgroundColor: '#ecf0f1', 214 | }, 215 | buttonContainer: { 216 | borderWidth: 1, 217 | padding: 10, 218 | borderRadius: 5, 219 | marginBottom: 20, 220 | }, 221 | text: { 222 | color: 'black', 223 | marginBottom: 5, 224 | }, 225 | thumbnail: { 226 | width: 200, 227 | height: 200, 228 | resizeMode: 'cover', 229 | marginTop: 20, 230 | }, 231 | inputContainer: { 232 | flexDirection: 'row', 233 | alignItems: 'center', 234 | borderWidth: 1, 235 | borderRadius: 10, 236 | paddingHorizontal: 10, 237 | marginBottom: 10, 238 | }, 239 | input: { paddingHorizontal: 20, paddingVertical: 10 }, 240 | video: { 241 | width: 200, 242 | height: 200, 243 | backgroundColor: 'black', 244 | marginTop: 20, 245 | }, 246 | modal: { 247 | alignItems: 'center', 248 | justifyContent: 'center', 249 | flex: 1, 250 | backgroundColor: 'rgba(0,0,0,0.5)', 251 | }, 252 | title: { 253 | fontWeight: 'bold', 254 | fontSize: 18, 255 | marginTop: 20, 256 | }, 257 | scrollContainer: { 258 | paddingTop: 100, 259 | alignItems: 'center', 260 | paddingBottom: 100, 261 | }, 262 | frame: { 263 | width: width, 264 | height: 200, 265 | }, 266 | framesScrollContainer: { paddingTop: 20 }, 267 | }); 268 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | StyleSheet, 4 | View, 5 | Text, 6 | Pressable, 7 | Image, 8 | TextInput, 9 | ScrollView, 10 | Modal, 11 | ActivityIndicator, 12 | Dimensions, 13 | } from 'react-native'; 14 | import VideoManager, { 15 | // TrimmerComponent, 16 | VideoInfoType, 17 | } from '@salihgun/react-native-video-processor'; 18 | import ImagePicker, { ImageOrVideo } from 'react-native-image-crop-picker'; 19 | import Video from 'react-native-video'; 20 | import RNFS from 'react-native-fs'; 21 | 22 | const width = Dimensions.get('window').width; 23 | export default function App() { 24 | const [videoInfo, setVideoInfo] = React.useState({ 25 | duration: 0, 26 | creationDate: '', 27 | size: 0, 28 | width: 0, 29 | height: 0, 30 | bit_rate: 0, 31 | codec_name: '', 32 | codec_type: '', 33 | sample_aspect_ratio: '', 34 | frame_rate: '', 35 | }); 36 | const [thumbnail, setThumbnail] = React.useState(''); 37 | const [startTime, setStartTime] = React.useState(''); 38 | const [duration, setDuration] = React.useState(''); 39 | const [videoPath, setVideoPath] = React.useState(''); 40 | const [framesPath, setFramesPath] = React.useState(''); 41 | const [reversedVideoPath, setReversedVideoPath] = React.useState(''); 42 | const [mergedVideoPath, setMergedVideoPath] = React.useState(''); 43 | // const [newPath, setNewPath] = React.useState(''); 44 | // const [value, setValue] = React.useState(0); 45 | const [speedPath, setSpeedPath] = React.useState(''); 46 | const [boomerangVideoPath, setBoomerangVideoPath] = 47 | React.useState(''); 48 | const [loading, setLoading] = React.useState(false); 49 | 50 | const onPickVideo = async () => { 51 | const video = (await ImagePicker.openPicker({ 52 | mediaType: 'video', 53 | multiple: true, 54 | })) as ImageOrVideo[]; 55 | 56 | const paths = video.map((item) => item.path); 57 | 58 | setLoading(true); 59 | 60 | const videoInfoResponse = await VideoManager.getVideoInfo( 61 | video[0]?.path as string 62 | ); 63 | const videoThumbnail = await VideoManager.createThumbnail( 64 | video[0]?.path as string 65 | ); 66 | const framePath = await VideoManager.createFrames( 67 | video[0]?.path as string, 68 | 5 69 | ); 70 | const clippedVideo = await VideoManager.trimVideo( 71 | video[0]?.path as string, 72 | startTime, 73 | duration 74 | ); 75 | const reversedVideo = await VideoManager.reverseVideo(clippedVideo); 76 | const newVideoPath = RNFS.DocumentDirectoryPath + '/newVideo.mp4'; 77 | const mergedVideo = await VideoManager.mergeVideos(paths, newVideoPath); 78 | const boomerangVideo = await VideoManager.boomerang( 79 | video[0]?.path as string, 80 | true 81 | ); 82 | 83 | const speedVideo = await VideoManager.setSpeed(video[0]?.path as string, 4); 84 | 85 | setSpeedPath(speedVideo); 86 | setBoomerangVideoPath(boomerangVideo); 87 | setMergedVideoPath(mergedVideo); 88 | setReversedVideoPath(reversedVideo); 89 | setVideoPath(clippedVideo); 90 | setThumbnail(videoThumbnail); 91 | setVideoInfo(videoInfoResponse); 92 | setFramesPath(framePath); 93 | setLoading(false); 94 | // setNewPath(video[0]?.path as string); 95 | }; 96 | 97 | return ( 98 | 99 | 103 | 104 | Choose Video 105 | 106 | 107 | Start time: 108 | 113 | 114 | 115 | Clip duration: 116 | 121 | 122 | 123 | Duration: {videoInfo.duration.toFixed(2)} seconds 124 | 125 | Creation Date: {videoInfo.creationDate} 126 | Size: {videoInfo.size} bytes 127 | Thumbnail 128 | {thumbnail !== '' && ( 129 | 130 | )} 131 | Clipped Video 132 | {videoPath !== '' && ( 133 | 199 | {/* 200 | Choose Video 201 | 202 | {newPath !== '' && ( 203 | 211 | )} */} 212 | 213 | 214 | 215 | 216 | 217 | 218 | ); 219 | } 220 | 221 | const styles = StyleSheet.create({ 222 | container: { 223 | flex: 1, 224 | alignItems: 'center', 225 | justifyContent: 'center', 226 | backgroundColor: '#ecf0f1', 227 | }, 228 | buttonContainer: { 229 | borderWidth: 1, 230 | padding: 10, 231 | borderRadius: 5, 232 | marginBottom: 20, 233 | }, 234 | text: { 235 | color: 'black', 236 | marginBottom: 5, 237 | }, 238 | thumbnail: { 239 | width: 200, 240 | height: 200, 241 | resizeMode: 'cover', 242 | marginTop: 20, 243 | }, 244 | inputContainer: { 245 | flexDirection: 'row', 246 | alignItems: 'center', 247 | borderWidth: 1, 248 | borderRadius: 10, 249 | paddingHorizontal: 10, 250 | marginBottom: 10, 251 | }, 252 | input: { paddingHorizontal: 20, paddingVertical: 10 }, 253 | video: { 254 | width: 200, 255 | height: 200, 256 | backgroundColor: 'black', 257 | marginTop: 20, 258 | }, 259 | modal: { 260 | alignItems: 'center', 261 | justifyContent: 'center', 262 | flex: 1, 263 | backgroundColor: 'rgba(0,0,0,0.5)', 264 | }, 265 | title: { 266 | fontWeight: 'bold', 267 | fontSize: 18, 268 | marginTop: 20, 269 | }, 270 | scrollContainer: { 271 | paddingTop: 100, 272 | alignItems: 'center', 273 | paddingBottom: 100, 274 | }, 275 | frame: { 276 | width: width, 277 | height: 200, 278 | }, 279 | framesScrollContainer: { paddingTop: 20 }, 280 | }); 281 | -------------------------------------------------------------------------------- /lefthook.yml: -------------------------------------------------------------------------------- 1 | pre-commit: 2 | parallel: true 3 | commands: 4 | lint: 5 | files: git diff --name-only @{push} 6 | glob: "*.{js,ts,jsx,tsx}" 7 | run: npx eslint {files} 8 | types: 9 | files: git diff --name-only @{push} 10 | glob: "*.{js,ts, jsx, tsx}" 11 | run: npx tsc --noEmit 12 | commit-msg: 13 | parallel: true 14 | commands: 15 | commitlint: 16 | run: npx commitlint --edit 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@salihgun/react-native-video-processor", 3 | "version": "0.3.1", 4 | "description": "test", 5 | "main": "lib/commonjs/index", 6 | "module": "lib/module/index", 7 | "types": "lib/typescript/index.d.ts", 8 | "react-native": "src/index", 9 | "source": "src/index", 10 | "files": [ 11 | "src", 12 | "lib", 13 | "android", 14 | "ios", 15 | "cpp", 16 | "*.podspec", 17 | "!lib/typescript/example", 18 | "!ios/build", 19 | "!android/build", 20 | "!android/gradle", 21 | "!android/gradlew", 22 | "!android/gradlew.bat", 23 | "!android/local.properties", 24 | "!**/__tests__", 25 | "!**/__fixtures__", 26 | "!**/__mocks__", 27 | "!**/.*" 28 | ], 29 | "scripts": { 30 | "test": "jest", 31 | "typescript": "tsc --noEmit", 32 | "lint": "eslint \"**/*.{js,ts,tsx}\"", 33 | "prepare": "bob build", 34 | "release": "release-it", 35 | "example": "yarn --cwd example", 36 | "bootstrap": "yarn example && yarn install && yarn example pods" 37 | }, 38 | "keywords": [ 39 | "react-native", 40 | "ios", 41 | "android" 42 | ], 43 | "repository": "https://github.com/salihgun/react-native-video-processor", 44 | "author": "salihgun (https://github.com/salihgun)", 45 | "license": "MIT", 46 | "bugs": { 47 | "url": "https://github.com/salihgun/react-native-video-processor/issues" 48 | }, 49 | "homepage": "https://github.com/salihgun/react-native-video-processor#readme", 50 | "publishConfig": { 51 | "registry": "https://registry.npmjs.org/" 52 | }, 53 | "devDependencies": { 54 | "@arkweid/lefthook": "^0.7.7", 55 | "@commitlint/config-conventional": "^17.0.2", 56 | "@react-native-community/eslint-config": "^3.0.2", 57 | "@release-it/conventional-changelog": "^5.0.0", 58 | "@types/jest": "^28.1.2", 59 | "@types/react": "~17.0.21", 60 | "@types/react-native": "0.68.0", 61 | "@types/react-native-video": "^5.0.14", 62 | "commitlint": "^17.0.2", 63 | "eslint": "^8.4.1", 64 | "eslint-config-prettier": "^8.5.0", 65 | "eslint-plugin-prettier": "^4.0.0", 66 | "jest": "^28.1.1", 67 | "pod-install": "^0.1.0", 68 | "prettier": "^2.0.5", 69 | "react": "18.1.0", 70 | "react-native": "0.70.5", 71 | "react-native-builder-bob": "^0.20.1", 72 | "release-it": "^15.0.0", 73 | "typescript": "^4.5.2" 74 | }, 75 | "resolutions": { 76 | "@types/react": "18.1.0" 77 | }, 78 | "peerDependencies": { 79 | "ffmpeg-kit-react-native": "^5.1.0", 80 | "react": "*", 81 | "react-native": "*", 82 | "react-native-video": "^5.2.1" 83 | }, 84 | "jest": { 85 | "preset": "react-native", 86 | "modulePathIgnorePatterns": [ 87 | "/example/node_modules", 88 | "/lib/" 89 | ] 90 | }, 91 | "commitlint": { 92 | "extends": [ 93 | "@commitlint/config-conventional" 94 | ] 95 | }, 96 | "release-it": { 97 | "git": { 98 | "commitMessage": "chore: release ${version}", 99 | "tagName": "v${version}" 100 | }, 101 | "npm": { 102 | "publish": true 103 | }, 104 | "github": { 105 | "release": true 106 | }, 107 | "plugins": { 108 | "@release-it/conventional-changelog": { 109 | "preset": "angular" 110 | } 111 | } 112 | }, 113 | "eslintConfig": { 114 | "root": true, 115 | "extends": [ 116 | "@react-native-community", 117 | "prettier" 118 | ], 119 | "rules": { 120 | "prettier/prettier": [ 121 | "error", 122 | { 123 | "quoteProps": "consistent", 124 | "singleQuote": true, 125 | "tabWidth": 2, 126 | "trailingComma": "es5", 127 | "useTabs": false 128 | } 129 | ] 130 | } 131 | }, 132 | "eslintIgnore": [ 133 | "node_modules/", 134 | "lib/" 135 | ], 136 | "prettier": { 137 | "quoteProps": "consistent", 138 | "singleQuote": true, 139 | "tabWidth": 2, 140 | "trailingComma": "es5", 141 | "useTabs": false 142 | }, 143 | "react-native-builder-bob": { 144 | "source": "src", 145 | "output": "lib", 146 | "targets": [ 147 | "commonjs", 148 | "module", 149 | [ 150 | "typescript", 151 | { 152 | "project": "tsconfig.build.json" 153 | } 154 | ] 155 | ] 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /scripts/bootstrap.js: -------------------------------------------------------------------------------- 1 | const os = require('os'); 2 | const path = require('path'); 3 | const child_process = require('child_process'); 4 | 5 | const root = path.resolve(__dirname, '..'); 6 | const args = process.argv.slice(2); 7 | const options = { 8 | cwd: process.cwd(), 9 | env: process.env, 10 | stdio: 'inherit', 11 | encoding: 'utf-8', 12 | }; 13 | 14 | if (os.type() === 'Windows_NT') { 15 | options.shell = true; 16 | } 17 | 18 | let result; 19 | 20 | if (process.cwd() !== root || args.length) { 21 | // We're not in the root of the project, or additional arguments were passed 22 | // In this case, forward the command to `yarn` 23 | result = child_process.spawnSync('yarn', args, options); 24 | } else { 25 | // If `yarn` is run without arguments, perform bootstrap 26 | result = child_process.spawnSync('yarn', ['bootstrap'], options); 27 | } 28 | 29 | process.exitCode = result.status; 30 | -------------------------------------------------------------------------------- /src/__tests__/index.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | it.todo('write a test'); 3 | -------------------------------------------------------------------------------- /src/__tests__/index.test.tsx: -------------------------------------------------------------------------------- 1 | it.todo('write a test'); 2 | -------------------------------------------------------------------------------- /src/components/Frame.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View, Image, StyleSheet, Platform, Dimensions } from 'react-native'; 3 | const width = Dimensions.get('window').width; 4 | class Frame extends React.PureComponent { 5 | render() { 6 | const { index, duration, framesPath } = this.props; 7 | const frame = `${framesPath}${index + 1}.jpg`; 8 | const lastFrameIndex = 2 * duration - 1; 9 | return index < lastFrameIndex 10 | ? React.createElement(Image, { 11 | source: { 12 | uri: frame, 13 | }, 14 | style: styles.container, 15 | }) 16 | : React.createElement(View, { style: styles.container }); 17 | } 18 | } 19 | const styles = StyleSheet.create({ 20 | container: { 21 | width: 40, 22 | height: Platform.select({ 23 | ios: width / 6, 24 | android: width / 6.5, 25 | }), 26 | }, 27 | }); 28 | export default Frame; 29 | -------------------------------------------------------------------------------- /src/components/Frame.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View, Image, StyleSheet, Platform, Dimensions } from 'react-native'; 3 | 4 | const width = Dimensions.get('window').width; 5 | 6 | type FramePropTypes = { 7 | readonly index: number; 8 | readonly duration: number; 9 | readonly framesPath: string; 10 | }; 11 | 12 | class Frame extends React.PureComponent { 13 | override render() { 14 | const { index, duration, framesPath } = this.props; 15 | const frame = `${framesPath}${index + 1}.jpg`; 16 | const lastFrameIndex = 2 * duration - 1; 17 | 18 | return index < lastFrameIndex ? ( 19 | 25 | ) : ( 26 | 27 | ); 28 | } 29 | } 30 | 31 | const styles = StyleSheet.create({ 32 | container: { 33 | width: 40, 34 | height: Platform.select({ 35 | ios: width / 6, 36 | android: width / 6.5, 37 | }), 38 | }, 39 | }); 40 | 41 | export default Frame; 42 | -------------------------------------------------------------------------------- /src/components/FrameSlider.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { FlatList, View } from 'react-native'; 3 | import Frame from './Frame'; 4 | import Marker from './Marker'; 5 | import styles from './styles'; 6 | const itemAmountPerScreen = 10; 7 | export class FrameSlider extends React.Component { 8 | flatList = React.createRef(); 9 | static defaultProps = { 10 | multiplicity: 0.1, 11 | decimalPlaces: 1, 12 | arrayLength: 10000, 13 | scrollEnabled: true, 14 | mainContainerStyle: null, 15 | itemStyle: null, 16 | tenthItemStyle: null, 17 | initialPositionValue: 0, 18 | }; 19 | constructor(props) { 20 | super(props); 21 | this.state = { 22 | items: this.generateArrayBlock(), 23 | width: 0, 24 | oneItemWidth: 0, 25 | value: props.initialPositionValue, 26 | }; 27 | } 28 | shouldComponentUpdate(nextProps, nextState) { 29 | const { width } = this.state; 30 | if (width === 0 && nextState.width !== 0) { 31 | return true; 32 | } 33 | if (nextProps.value !== nextState.value) { 34 | this.setState({ 35 | value: nextProps.value, 36 | }); 37 | this.scrollToElement(nextProps.value); 38 | } 39 | return false; 40 | } 41 | onLayout = (event) => { 42 | this.setState({ 43 | width: event.nativeEvent.layout.width, 44 | oneItemWidth: Math.round( 45 | event.nativeEvent.layout.width / itemAmountPerScreen 46 | ), 47 | }); 48 | this.init(); 49 | }; 50 | onSliderMoved = (event) => { 51 | const { oneItemWidth } = this.state; 52 | const { onValueChange, initialPositionValue, maximumValue, decimalPlaces } = 53 | this.props; 54 | let newValue = 55 | initialPositionValue + 56 | (event.nativeEvent.contentOffset.x / oneItemWidth) * 57 | this.props.multiplicity; 58 | if (maximumValue && newValue > maximumValue) { 59 | newValue = maximumValue; 60 | } 61 | const setValue = parseFloat( 62 | parseFloat(newValue.toString()).toFixed(decimalPlaces) 63 | ); 64 | this.setState({ 65 | value: setValue, 66 | }); 67 | onValueChange(setValue); 68 | }; 69 | generateArrayBlock = () => { 70 | const { arrayLength, maximumValue, multiplicity } = this.props; 71 | let length = arrayLength; 72 | if (maximumValue) { 73 | length = maximumValue / multiplicity; 74 | length += itemAmountPerScreen; 75 | } 76 | return new Array(length).fill(0); 77 | }; 78 | init = () => { 79 | setTimeout(() => this.scrollToElement(this.props.value), 100); 80 | }; 81 | scrollToElement = (value) => 82 | this.flatList.current && 83 | this.flatList.current.scrollToOffset({ 84 | offset: (value * this.state.oneItemWidth) / this.props.multiplicity, 85 | animated: false, 86 | }); 87 | renderFrame = (element) => 88 | React.createElement(Frame, { 89 | duration: this.props.duration, 90 | index: element.index, 91 | framesPath: this.props.framesPath, 92 | }); 93 | renderDefaultThumb = () => 94 | React.createElement(Marker, { thumbStyle: this.props.thumbStyle }); 95 | render() { 96 | const { renderThumb, scrollEnabled, mainContainerStyle } = this.props; 97 | const { items, width } = this.state; 98 | return React.createElement( 99 | View, 100 | { 101 | style: [styles.mainContainer, mainContainerStyle], 102 | onLayout: this.onLayout, 103 | }, 104 | React.createElement(FlatList, { 105 | style: [ 106 | styles.flatlistContainer, 107 | this.props.flatlistStyle && this.props.flatlistStyle, 108 | ], 109 | ref: this.flatList, 110 | getItemLayout: (_, index) => ({ 111 | length: this.state.oneItemWidth, 112 | offset: this.state.oneItemWidth * index, 113 | index, 114 | }), 115 | scrollEnabled: scrollEnabled, 116 | data: width === 0 ? [] : items, 117 | keyboardShouldPersistTaps: 'always', 118 | horizontal: true, 119 | onScrollEndDrag: this.onSliderMoved, 120 | onScroll: this.onSliderMoved, 121 | onMomentumScrollBegin: this.onSliderMoved, 122 | onMomentumScrollEnd: this.onSliderMoved, 123 | keyExtractor: (_, index) => index.toString(), 124 | renderItem: this.renderFrame, 125 | showsHorizontalScrollIndicator: false, 126 | }), 127 | renderThumb ? renderThumb() : this.renderDefaultThumb() 128 | ); 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /src/components/FrameSlider.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | FlatList, 4 | LayoutChangeEvent, 5 | NativeScrollEvent, 6 | NativeSyntheticEvent, 7 | View, 8 | } from 'react-native'; 9 | import Frame from './Frame'; 10 | import Marker from './Marker'; 11 | 12 | import styles from './styles'; 13 | import type { FrameSliderPropTypes, FrameSliderState, Element } from './types'; 14 | 15 | const itemAmountPerScreen = 10; 16 | 17 | export class FrameSlider extends React.Component< 18 | FrameSliderPropTypes, 19 | FrameSliderState 20 | > { 21 | flatList: React.RefObject> = React.createRef(); 22 | 23 | static defaultProps = { 24 | multiplicity: 0.1, 25 | decimalPlaces: 1, 26 | arrayLength: 10000, 27 | scrollEnabled: true, 28 | mainContainerStyle: null, 29 | itemStyle: null, 30 | tenthItemStyle: null, 31 | initialPositionValue: 0, 32 | }; 33 | 34 | constructor(props: FrameSliderPropTypes) { 35 | super(props); 36 | this.state = { 37 | items: this.generateArrayBlock(), 38 | width: 0, 39 | oneItemWidth: 0, 40 | value: props.initialPositionValue, 41 | }; 42 | } 43 | 44 | override shouldComponentUpdate( 45 | nextProps: Readonly, 46 | nextState: Readonly 47 | ): boolean { 48 | const { width } = this.state; 49 | 50 | if (width === 0 && nextState.width !== 0) { 51 | return true; 52 | } 53 | 54 | if (nextProps.value !== nextState.value) { 55 | this.setState({ 56 | value: nextProps.value, 57 | }); 58 | this.scrollToElement(nextProps.value); 59 | } 60 | 61 | return false; 62 | } 63 | 64 | onLayout = (event: LayoutChangeEvent) => { 65 | this.setState({ 66 | width: event.nativeEvent.layout.width, 67 | oneItemWidth: Math.round( 68 | event.nativeEvent.layout.width / itemAmountPerScreen 69 | ), 70 | }); 71 | this.init(); 72 | }; 73 | 74 | onSliderMoved = (event: NativeSyntheticEvent) => { 75 | const { oneItemWidth } = this.state; 76 | const { onValueChange, initialPositionValue, maximumValue, decimalPlaces } = 77 | this.props; 78 | 79 | let newValue = 80 | initialPositionValue + 81 | (event.nativeEvent.contentOffset.x / oneItemWidth) * 82 | this.props.multiplicity; 83 | if (maximumValue && newValue > maximumValue) { 84 | newValue = maximumValue; 85 | } 86 | 87 | const setValue = parseFloat( 88 | parseFloat(newValue.toString()).toFixed(decimalPlaces) 89 | ); 90 | 91 | this.setState({ 92 | value: setValue, 93 | }); 94 | onValueChange(setValue); 95 | }; 96 | 97 | generateArrayBlock = (): Array => { 98 | const { arrayLength, maximumValue, multiplicity } = this.props; 99 | 100 | let length = arrayLength; 101 | 102 | if (maximumValue) { 103 | length = maximumValue / multiplicity; 104 | length += itemAmountPerScreen; 105 | } 106 | 107 | return new Array(length).fill(0); 108 | }; 109 | 110 | init = () => { 111 | setTimeout(() => this.scrollToElement(this.props.value), 100); 112 | }; 113 | 114 | scrollToElement = (value: number) => 115 | this.flatList.current && 116 | this.flatList.current.scrollToOffset({ 117 | offset: (value * this.state.oneItemWidth) / this.props.multiplicity, 118 | animated: false, 119 | }); 120 | 121 | renderFrame = (element: Element) => ( 122 | 127 | ); 128 | 129 | renderDefaultThumb = () => ; 130 | 131 | override render() { 132 | const { renderThumb, scrollEnabled, mainContainerStyle } = this.props; 133 | const { items, width } = this.state; 134 | 135 | return ( 136 | 140 | ({ 147 | length: this.state.oneItemWidth, 148 | offset: this.state.oneItemWidth * index, 149 | index, 150 | })} 151 | scrollEnabled={scrollEnabled} 152 | data={width === 0 ? [] : items} 153 | keyboardShouldPersistTaps="always" 154 | horizontal 155 | onScrollEndDrag={this.onSliderMoved} 156 | onScroll={this.onSliderMoved} 157 | onMomentumScrollBegin={this.onSliderMoved} 158 | onMomentumScrollEnd={this.onSliderMoved} 159 | keyExtractor={(_, index) => index.toString()} 160 | renderItem={this.renderFrame} 161 | showsHorizontalScrollIndicator={false} 162 | /> 163 | {renderThumb ? renderThumb() : this.renderDefaultThumb()} 164 | 165 | ); 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/components/Marker.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View, StyleSheet, Platform, Dimensions } from 'react-native'; 3 | const width = Dimensions.get('window').width; 4 | class Marker extends React.PureComponent { 5 | render() { 6 | return React.createElement(View, { 7 | style: { 8 | ...styles.container, 9 | ...this.props.thumbStyle, 10 | }, 11 | }); 12 | } 13 | } 14 | const styles = StyleSheet.create({ 15 | container: { 16 | width: 40, 17 | borderWidth: width / 70, 18 | borderColor: 'black', 19 | height: Platform.select({ 20 | ios: width / 6, 21 | android: width / 6.5, 22 | }), 23 | zIndex: 99, 24 | backgroundColor: 'transparent', 25 | position: 'absolute', 26 | left: width / 2 - 20, 27 | alignSelf: 'center', 28 | }, 29 | }); 30 | export default Marker; 31 | -------------------------------------------------------------------------------- /src/components/Marker.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View, StyleSheet, Platform, Dimensions } from 'react-native'; 3 | import type { IMarkerProps } from './types'; 4 | 5 | const width = Dimensions.get('window').width; 6 | 7 | class Marker extends React.PureComponent { 8 | override render() { 9 | return ( 10 | 16 | ); 17 | } 18 | } 19 | 20 | const styles = StyleSheet.create({ 21 | container: { 22 | width: 40, 23 | borderWidth: width / 70, 24 | borderColor: 'black', 25 | height: Platform.select({ 26 | ios: width / 6, 27 | android: width / 6.5, 28 | }), 29 | zIndex: 99, 30 | backgroundColor: 'transparent', 31 | position: 'absolute', 32 | left: width / 2 - 20, 33 | alignSelf: 'center', 34 | }, 35 | }); 36 | 37 | export default Marker; 38 | -------------------------------------------------------------------------------- /src/components/TrimmerComponent.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Dimensions, Platform, StyleSheet } from 'react-native'; 3 | import Video from 'react-native-video'; 4 | import { FrameSlider } from './FrameSlider'; 5 | const { width, height } = Dimensions.get('window'); 6 | export class TrimmerComponent extends React.Component { 7 | videoPlayerRef = React.createRef(); 8 | state = { 9 | progress: -1, 10 | }; 11 | roundedDuration = Math.round(this.props.duration); 12 | componentDidUpdate(prevProps) { 13 | const valueChanged = prevProps.seekValue !== this.props.seekValue; 14 | const clipLengthChanged = 15 | prevProps.clipDuration !== this.props.clipDuration; 16 | const durationChanged = prevProps.duration !== this.props.duration; 17 | const progressChanged = this.state.progress !== prevProps.duration; 18 | if (this.videoPlayerRef.current) { 19 | if (clipLengthChanged || valueChanged) { 20 | this.videoPlayerRef.current.seek(this.props.seekValue); 21 | } 22 | if (progressChanged || clipLengthChanged || valueChanged) { 23 | if ( 24 | this.props.seekValue + this.props.clipDuration === 25 | this.state.progress 26 | ) { 27 | this.videoPlayerRef.current.seek(this.props.seekValue); 28 | } 29 | } 30 | if (clipLengthChanged || valueChanged || durationChanged) { 31 | if ( 32 | this.props.seekValue + this.props.clipDuration > 33 | this.roundedDuration 34 | ) { 35 | this.videoPlayerRef.current.seek(this.props.seekValue); 36 | } 37 | } 38 | } 39 | } 40 | render() { 41 | const { seekValue, setSeekValue, path, framesPath } = this.props; 42 | return React.createElement( 43 | React.Fragment, 44 | null, 45 | React.createElement(Video, { 46 | ref: this.videoPlayerRef, 47 | source: { 48 | uri: path, 49 | }, 50 | style: [styles.videoContainer, this.props.videoContainerStyle], 51 | paused: this.props.paused || false, 52 | muted: this.props.muted || false, 53 | controls: this.props.controls || false, 54 | playInBackground: false, 55 | resizeMode: this.props.resizeMode || 'cover', 56 | repeat: 57 | this.props.repeat || 58 | Platform.select({ 59 | ios: true, 60 | android: false, 61 | }), 62 | onProgress: (data) => 63 | this.setState({ progress: Math.round(data.currentTime) }), 64 | onEnd: () => { 65 | this.videoPlayerRef.current?.seek(seekValue); 66 | }, 67 | }), 68 | React.createElement(FrameSlider, { 69 | value: seekValue, 70 | onValueChange: setSeekValue, 71 | framesPath: framesPath, 72 | duration: this.roundedDuration, 73 | multiplicity: 0.5, 74 | decimalPlaces: 0, 75 | flatlistStyle: { 76 | ...styles.flatlistStyle, 77 | ...this.props.sliderListStyle, 78 | }, 79 | mainContainerStyle: { 80 | ...styles.mainContainerStyle, 81 | ...this.props.sliderContainerStyle, 82 | }, 83 | maximumValue: this.roundedDuration - 1.5, 84 | thumbStyle: this.props.thumbStyle, 85 | renderThumb: this.props.renderThumb, 86 | }) 87 | ); 88 | } 89 | } 90 | const styles = StyleSheet.create({ 91 | videoContainer: { 92 | width: width, 93 | height: height * 0.5, 94 | zIndex: 99, 95 | }, 96 | flatlistStyle: { 97 | width: width, 98 | paddingLeft: width / 2 - 20, 99 | backgroundColor: 'gray', 100 | }, 101 | mainContainerStyle: { 102 | height: Platform.select({ 103 | ios: width / 6, 104 | android: width / 6.5, 105 | }), 106 | }, 107 | }); 108 | -------------------------------------------------------------------------------- /src/components/TrimmerComponent.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Dimensions, Platform, StyleSheet } from 'react-native'; 3 | import Video from 'react-native-video'; 4 | import { FrameSlider } from './FrameSlider'; 5 | import type { ITrimmerComponentProps } from './types'; 6 | 7 | const { width, height } = Dimensions.get('window'); 8 | 9 | export class TrimmerComponent extends React.Component { 10 | videoPlayerRef = React.createRef