Skip to content

Commit 599f345

Browse files
committed
feat: added all components and updated example
1 parent 277302c commit 599f345

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+43685
-252
lines changed

.yarn/releases/yarn-3.6.1.cjs renamed to .yarn/releases/yarn-3.6.4.cjs

Lines changed: 213 additions & 213 deletions
Large diffs are not rendered by default.

.yarnrc.yml

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
nodeLinker: node-modules
21
nmHoistingLimits: workspaces
32

3+
nodeLinker: node-modules
4+
45
plugins:
56
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
67
spec: "@yarnpkg/plugin-interactive-tools"
78
- path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
89
spec: "@yarnpkg/plugin-workspace-tools"
910

10-
yarnPath: .yarn/releases/yarn-3.6.1.cjs
11+
yarnPath: .yarn/releases/yarn-3.6.4.cjs

README.md

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,51 @@
1-
# react-native-video-trimmer
1+
# react-native-video-trimmer-ui
22

3-
Trim videos in react-native
3+
React Native Video Trimmer is a powerful and easy-to-use component that allows you to add video trimming functionality to your React Native applications. With this library, users can easily select a specific portion of a video to trim, making it perfect for video editing apps, social media platforms, or any application that requires video manipulation.
4+
5+
## Key Features
6+
7+
- Intuitive user interface for selecting trim range
8+
- Real-time preview of the trimmed video section
9+
- Customizable trim duration limits
10+
- Support for various video formats
11+
- Efficient trimming process with optimized performance
12+
- Cross-platform compatibility (iOS and Android)
13+
- Easy integration with existing React Native projects
14+
15+
This library leverages native video processing capabilities to ensure smooth performance and high-quality output. Whether you're building a video editing app or simply need to add trimming functionality to your existing project, react-native-video-trimmer provides a robust solution with a simple API.
416

517
## Installation
618

719
```sh
8-
npm install react-native-video-trimmer
20+
npm install react-native-video react-native-video-trimmer-ui
921
```
1022

1123
## Usage
1224

13-
14-
```js
15-
import { multiply } from 'react-native-video-trimmer';
25+
```javascript
26+
import VideoTrimmer from 'react-native-video-trimmer';
1627

1728
// ...
1829

19-
const result = await multiply(3, 7);
30+
<VideoTrimmer source={videoSource} />
2031
```
2132

33+
## Props
2234

23-
## Contributing
35+
| Prop | Type | Default | Description |
36+
|------|------|---------|-------------|
37+
| source | ReactVideoSource | required | The source of the video (e.g., `{ uri: 'https://example.com/video.mp4' }`) |
38+
| loop | boolean | true | Whether the video should loop after reaching the end |
39+
| containerStyle | ViewStyle | - | Custom styles for the container of the VideoWithSlider component |
40+
| sliderContainerStyle | ViewStyle | - | Custom styles for the slider container |
41+
| tintColor | string | '#24a0ed' | Color of the slider and its components |
2442

25-
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
43+
## Features
2644

27-
## License
28-
29-
MIT
45+
- Video trimming functionality for React Native applications
46+
- Customizable slider for selecting trim range
47+
- Supports looping video playback
3048

31-
---
49+
## License
3250

33-
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
51+
MIT

example/android/.gitignore

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Android/IntelliJ
6+
#
7+
build/
8+
.idea
9+
.gradle
10+
local.properties
11+
*.iml
12+
*.hprof
13+
.cxx/
14+
15+
# Bundle artifacts
16+
*.jsbundle

example/android/app/build.gradle

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
apply plugin: "com.android.application"
2+
apply plugin: "org.jetbrains.kotlin.android"
3+
apply plugin: "com.facebook.react"
4+
5+
def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
6+
7+
static def versionToNumber(major, minor, patch) {
8+
return patch * 100 + minor * 10000 + major * 1000000
9+
}
10+
11+
def getRNVersion() {
12+
def version = providers.exec {
13+
workingDir(projectDir)
14+
commandLine("node", "-e", "console.log(require('react-native/package.json').version);")
15+
}.standardOutput.asText.get().trim()
16+
17+
def coreVersion = version.split("-")[0]
18+
def (major, minor, patch) = coreVersion.tokenize('.').collect { it.toInteger() }
19+
20+
return versionToNumber(
21+
major,
22+
minor,
23+
patch
24+
)
25+
}
26+
def rnVersion = getRNVersion()
27+
28+
/**
29+
* This is the configuration block to customize your React Native Android app.
30+
* By default you don't need to apply any configuration, just uncomment the lines you need.
31+
*/
32+
react {
33+
entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
34+
reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
35+
hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
36+
codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
37+
38+
// Use Expo CLI to bundle the app, this ensures the Metro config
39+
// works correctly with Expo projects.
40+
cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
41+
bundleCommand = "export:embed"
42+
43+
/* Folders */
44+
// The root of your project, i.e. where "package.json" lives. Default is '..'
45+
// root = file("../")
46+
// The folder where the react-native NPM package is. Default is ../node_modules/react-native
47+
// reactNativeDir = file("../node_modules/react-native")
48+
// The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
49+
// codegenDir = file("../node_modules/@react-native/codegen")
50+
51+
/* Variants */
52+
// The list of variants to that are debuggable. For those we're going to
53+
// skip the bundling of the JS bundle and the assets. By default is just 'debug'.
54+
// If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
55+
// debuggableVariants = ["liteDebug", "prodDebug"]
56+
57+
/* Bundling */
58+
// A list containing the node command and its flags. Default is just 'node'.
59+
// nodeExecutableAndArgs = ["node"]
60+
61+
//
62+
// The path to the CLI configuration file. Default is empty.
63+
// bundleConfig = file(../rn-cli.config.js)
64+
//
65+
// The name of the generated asset file containing your JS bundle
66+
// bundleAssetName = "MyApplication.android.bundle"
67+
//
68+
// The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
69+
// entryFile = file("../js/MyApplication.android.js")
70+
//
71+
// A list of extra flags to pass to the 'bundle' commands.
72+
// See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
73+
// extraPackagerArgs = []
74+
75+
/* Hermes Commands */
76+
// The hermes compiler command to run. By default it is 'hermesc'
77+
// hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
78+
//
79+
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
80+
// hermesFlags = ["-O", "-output-source-map"]
81+
82+
if (rnVersion >= versionToNumber(0, 75, 0)) {
83+
/* Autolinking */
84+
autolinkLibrariesWithApp()
85+
}
86+
}
87+
88+
/**
89+
* Set this to true to Run Proguard on Release builds to minify the Java bytecode.
90+
*/
91+
def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
92+
93+
/**
94+
* The preferred build flavor of JavaScriptCore (JSC)
95+
*
96+
* For example, to use the international variant, you can use:
97+
* `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
98+
*
99+
* The international variant includes ICU i18n library and necessary data
100+
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
101+
* give correct results when using with locales other than en-US. Note that
102+
* this variant is about 6MiB larger per architecture than default.
103+
*/
104+
def jscFlavor = 'org.webkit:android-jsc:+'
105+
106+
android {
107+
ndkVersion rootProject.ext.ndkVersion
108+
109+
buildToolsVersion rootProject.ext.buildToolsVersion
110+
compileSdk rootProject.ext.compileSdkVersion
111+
112+
namespace 'videotrimmer.example'
113+
defaultConfig {
114+
applicationId 'videotrimmer.example'
115+
minSdkVersion rootProject.ext.minSdkVersion
116+
targetSdkVersion rootProject.ext.targetSdkVersion
117+
versionCode 1
118+
versionName "1.0.0"
119+
}
120+
signingConfigs {
121+
debug {
122+
storeFile file('debug.keystore')
123+
storePassword 'android'
124+
keyAlias 'androiddebugkey'
125+
keyPassword 'android'
126+
}
127+
}
128+
buildTypes {
129+
debug {
130+
signingConfig signingConfigs.debug
131+
}
132+
release {
133+
// Caution! In production, you need to generate your own keystore file.
134+
// see https://reactnative.dev/docs/signed-apk-android.
135+
signingConfig signingConfigs.debug
136+
shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
137+
minifyEnabled enableProguardInReleaseBuilds
138+
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
139+
crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
140+
}
141+
}
142+
packagingOptions {
143+
jniLibs {
144+
useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
145+
}
146+
}
147+
}
148+
149+
// Apply static values from `gradle.properties` to the `android.packagingOptions`
150+
// Accepts values in comma delimited lists, example:
151+
// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
152+
["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
153+
// Split option: 'foo,bar' -> ['foo', 'bar']
154+
def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
155+
// Trim all elements in place.
156+
for (i in 0..<options.size()) options[i] = options[i].trim();
157+
// `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
158+
options -= ""
159+
160+
if (options.length > 0) {
161+
println "android.packagingOptions.$prop += $options ($options.length)"
162+
// Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
163+
options.each {
164+
android.packagingOptions[prop] += it
165+
}
166+
}
167+
}
168+
169+
dependencies {
170+
// The version of react-native is set by the React Native Gradle Plugin
171+
implementation("com.facebook.react:react-android")
172+
173+
def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
174+
def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
175+
def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
176+
177+
if (isGifEnabled) {
178+
// For animated gif support
179+
implementation("com.facebook.fresco:animated-gif:${reactAndroidLibs.versions.fresco.get()}")
180+
}
181+
182+
if (isWebpEnabled) {
183+
// For webp support
184+
implementation("com.facebook.fresco:webpsupport:${reactAndroidLibs.versions.fresco.get()}")
185+
if (isWebpAnimatedEnabled) {
186+
// Animated webp support
187+
implementation("com.facebook.fresco:animated-webp:${reactAndroidLibs.versions.fresco.get()}")
188+
}
189+
}
190+
191+
if (hermesEnabled.toBoolean()) {
192+
implementation("com.facebook.react:hermes-android")
193+
} else {
194+
implementation jscFlavor
195+
}
196+
}
197+
198+
if (rnVersion < versionToNumber(0, 75, 0)) {
199+
apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
200+
applyNativeModulesAppBuildGradle(project)
201+
}

example/android/app/debug.keystore

2.2 KB
Binary file not shown.
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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+
# react-native-reanimated
11+
-keep class com.swmansion.reanimated.** { *; }
12+
-keep class com.facebook.react.turbomodule.** { *; }
13+
14+
# Add any project specific keep options here:
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2+
xmlns:tools="http://schemas.android.com/tools">
3+
4+
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
5+
6+
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
7+
</manifest>
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
2+
<uses-permission android:name="android.permission.INTERNET"/>
3+
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
4+
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
5+
<uses-permission android:name="android.permission.VIBRATE"/>
6+
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
7+
<queries>
8+
<intent>
9+
<action android:name="android.intent.action.VIEW"/>
10+
<category android:name="android.intent.category.BROWSABLE"/>
11+
<data android:scheme="https"/>
12+
</intent>
13+
</queries>
14+
<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme">
15+
<meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
16+
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
17+
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
18+
<activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
19+
<intent-filter>
20+
<action android:name="android.intent.action.MAIN"/>
21+
<category android:name="android.intent.category.LAUNCHER"/>
22+
</intent-filter>
23+
<intent-filter>
24+
<action android:name="android.intent.action.VIEW"/>
25+
<category android:name="android.intent.category.DEFAULT"/>
26+
<category android:name="android.intent.category.BROWSABLE"/>
27+
<data android:scheme="videotrimmer.example"/>
28+
</intent-filter>
29+
</activity>
30+
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false"/>
31+
</application>
32+
</manifest>

0 commit comments

Comments
 (0)