@technotoil/image-video-editor 0.1.0

package/ImageVideoEditor.podspec

@@ -0,0 +1,21 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "ImageVideoEditor"
+  s.version      = package["version"]
+  s.summary      = "A high-performance React Native image and video editor."
+  s.description  = package["description"]
+  s.homepage     = "https://github.com/worktechnotoil/image-video-editor"
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/worktechnotoil/image-video-editor.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.resources    = "ios/frames/*.png"
+
+  install_modules_dependencies(s)
+end

package/README.md

@@ -0,0 +1,136 @@
+# @technotoil/image-video-editor
+
+A high-performance, feature-rich React Native image and video editor. This library packages video trimming, custom image overlay frames, audio mix, native iOS/Android camera, and video filter features into a single, cohesive standalone component.
+
+## Features
+* 📹 **Native Camera View**: High-performance thread-safe AVCaptureSession wrapper for iOS and custom camera on Android.
+* ✂️ **Video Trimming**: Seamless interactive trimming of video files.
+* 🖼️ **Custom Photo Frames**: Layer beautiful custom frames on top of images.
+* 🎵 **Audio Mixing**: Select and mix audio tracks onto video exports.
+* 🎨 **Real-time Filters**: High-performance shaders/filters for photo and video formats.
+* 📦 **Modular Export**: Triggers callbacks with local filesystem URIs suitable for server uploads.
+
+---
+
+## Installation
+
+Add the library to your React Native project:
+
+```bash
+yarn add @technotoil/image-video-editor
+# or
+npm install @technotoil/image-video-editor
+```
+
+Ensure the peer dependencies are installed:
+
+```bash
+yarn add react-native-image-crop-picker react-native-safe-area-context react-native-vector-icons react-native-video
+```
+
+### Native Setup
+
+#### iOS Installation
+Run pod install in your `ios` directory:
+```bash
+cd ios && pod install
+```
+
+Ensure the following keys are added to your `Info.plist`:
+```xml
+<key>NSCameraUsageDescription</key>
+<string>We need access to your camera to record videos and take photos.</string>
+<key>NSMicrophoneUsageDescription</key>
+<string>We need access to your microphone to record audio for videos.</string>
+<key>NSPhotoLibraryUsageDescription</key>
+<string>We need access to your photo library to pick and save media files.</string>
+```
+
+#### Android Installation
+Make sure to add the FFmpeg kit dependency in your app's `android/app/build.gradle`:
+```groovy
+dependencies {
+    implementation("io.github.maitrungduc1410:ffmpeg-kit-min:6.0.1")
+}
+```
+
+Add permissions in `AndroidManifest.xml`:
+```xml
+<uses-permission android:name="android.permission.CAMERA" />
+<uses-permission android:name="android.permission.RECORD_AUDIO" />
+<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+```
+
+---
+
+## Quick Example (onPress Modal Integration)
+
+The editor is designed to launch cleanly from a button action and output the video URL when exported.
+
+```tsx
+import React, { useState } from 'react';
+import { View, Button, Modal, StyleSheet } from 'react-native';
+import { VideoEditor } from '@technotoil/image-video-editor';
+
+export default function App() {
+  const [editorVisible, setEditorVisible] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <Button 
+        title="Open Video Editor" 
+        onPress={() => setEditorVisible(true)} 
+      />
+
+      <Modal
+        visible={editorVisible}
+        animationType="slide"
+        onRequestClose={() => setEditorVisible(false)}
+      >
+        <VideoEditor
+          headerTitle="Create New Post"
+          cameraModes={['POST', 'STORY', 'REEL']}
+          defaultCameraMode="REEL"
+          onCancelPress={() => setEditorVisible(false)}
+          onFinishExport={(editedMedia, paths, editedArray, cameraMode) => {
+            console.log('Export completed successfully!');
+            console.log('Exported File Paths:', paths); // array of video/image URLs
+            
+            // Perform your server upload here:
+            // uploadToServer(paths[0]);
+
+            setEditorVisible(false);
+          }}
+        />
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+  },
+});
+```
+
+## Props API
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `headerTitle` | `string` | `"New post"` | Title text displayed in the header. |
+| `cameraModes` | `Array<'POST' \| 'STORY' \| 'REEL'>` | `['POST', 'STORY', 'REEL']` | Active shooting modes allowed. |
+| `defaultCameraMode` | `'POST' \| 'STORY' \| 'REEL'` | `"REEL"` | Initial shooting mode when opening. |
+| `musicList` | `MusicTrack[]` | `[]` | List of audio tracks available to overlay on videos. |
+| `onCancelPress` | `() => void` | `undefined` | Callback fired when user cancels or leaves the editor. |
+| `onFinishExport` | `(editedMedia: any, paths: string[], editedArray: any[], cameraMode: string) => void` | `undefined` | Fired when edits finish exporting. Fills `paths` with target video/image file URIs. |
+
+---
+
+## License
+
+MIT

package/android/build.gradle

@@ -0,0 +1,76 @@
+buildscript {
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['ImageVideoEditor_' + name]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+apply plugin: "com.facebook.react"
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["ImageVideoEditor_" + name]).toInteger()
+}
+
+android {
+  namespace "com.technotoil.image_videoeditor"
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += [
+        "generated/java",
+        "generated/jni"
+      ]
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "io.github.maitrungduc1410:ffmpeg-kit-min:6.0.1"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+ImageVideoEditor_kotlinVersion=2.0.21
+ImageVideoEditor_minSdkVersion=24
+ImageVideoEditor_targetSdkVersion=34
+ImageVideoEditor_compileSdkVersion=35
+ImageVideoEditor_ndkVersion=27.1.12297006

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,13 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+      <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
+    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
+    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+
+    <!-- Library manifest: only declare permissions here. Do NOT declare application/activity with
+         MAIN/LAUNCHER intent-filter in a library — that would create an extra app icon when merged
+         into a host application. Application-level components should be defined in the app only. -->
+</manifest>

package/android/src/main/java/com/technotoil/image_videoeditor/FrameGrabberModule.kt

@@ -0,0 +1,67 @@
+package com.technotoil.image_videoeditor
+
+import android.graphics.Bitmap
+import android.media.MediaMetadataRetriever
+import android.net.Uri
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.bridge.ReadableMap
+import java.io.File
+import java.io.FileOutputStream
+
+class FrameGrabberModule(private val reactContext: ReactApplicationContext) :
+  ReactContextBaseJavaModule(reactContext) {
+
+  override fun getName(): String = "RNFrameGrabber"
+
+  @ReactMethod
+  fun captureFrame(uriString: String, options: ReadableMap, promise: Promise) {
+    try {
+      val retriever = MediaMetadataRetriever()
+      
+      val uri = Uri.parse(uriString)
+      if (uri.scheme == "file" || uriString.startsWith("/")) {
+        val path = uri.path ?: if (uriString.startsWith("file://")) uriString.substring(7) else uriString
+        retriever.setDataSource(path)
+      } else {
+        retriever.setDataSource(reactContext, uri)
+      }
+
+      val timeMs = if (options.hasKey("timeMs")) options.getDouble("timeMs") else 0.0
+      val timeUs = (timeMs * 1000).toLong()
+      
+      var bitmap: Bitmap? = null
+      try {
+        bitmap = retriever.getFrameAtTime(timeUs, MediaMetadataRetriever.OPTION_CLOSEST)
+      } catch (e: Exception) {
+        // Fallback
+      }
+      
+      if (bitmap == null) {
+        try {
+          bitmap = retriever.getFrameAtTime(timeUs)
+        } catch (e: Exception) {
+          // Fallback
+        }
+      }
+      
+      retriever.release()
+
+      if (bitmap == null) {
+        promise.reject("frame_failed", "Could not capture frame")
+        return
+      }
+
+      val outFile = File.createTempFile("frame_", ".jpg", reactContext.cacheDir)
+      FileOutputStream(outFile).use { out ->
+        bitmap.compress(Bitmap.CompressFormat.JPEG, 90, out)
+      }
+
+      promise.resolve(Uri.fromFile(outFile).toString())
+    } catch (e: Exception) {
+      promise.reject("frame_failed", e.message, e)
+    }
+  }
+}