@igorpache/expo-video-editor 0.1.0

package/ios/ImageVideoWriter.swift

@@ -0,0 +1,144 @@
+import AVFoundation
+import CoreVideo
+import UIKit
+
+enum ImageVideoWriter {
+  enum WriterError: Error {
+    case imageLoad
+    case setup
+    case pixelBuffer
+    case write
+  }
+
+  static func makeSilentVideo(imageUri: String, durationMs: Int, maxSide: Int) async throws -> URL {
+    guard let image = loadImage(imageUri), let cgImage = image.cgImage else {
+      throw WriterError.imageLoad
+    }
+
+    let (width, height) = outputSize(cgImage.width, cgImage.height, maxSide: maxSide)
+    let outURL = FileManager.default.temporaryDirectory
+      .appendingPathComponent("vieditor-still-\(UUID().uuidString).mp4")
+
+    guard let writer = try? AVAssetWriter(outputURL: outURL, fileType: .mp4) else {
+      throw WriterError.setup
+    }
+
+    let settings: [String: Any] = [
+      AVVideoCodecKey: AVVideoCodecType.h264,
+      AVVideoWidthKey: width,
+      AVVideoHeightKey: height,
+    ]
+    let input = AVAssetWriterInput(mediaType: .video, outputSettings: settings)
+    input.expectsMediaDataInRealTime = false
+
+    let attrs: [String: Any] = [
+      kCVPixelBufferPixelFormatTypeKey as String: kCVPixelFormatType_32ARGB,
+      kCVPixelBufferWidthKey as String: width,
+      kCVPixelBufferHeightKey as String: height,
+    ]
+    let adaptor = AVAssetWriterInputPixelBufferAdaptor(assetWriterInput: input, sourcePixelBufferAttributes: attrs)
+
+    guard writer.canAdd(input) else { throw WriterError.setup }
+    writer.add(input)
+
+    guard writer.startWriting() else { throw WriterError.write }
+    writer.startSession(atSourceTime: .zero)
+
+    guard let buffer = makePixelBuffer(cgImage: cgImage, width: width, height: height, pool: adaptor.pixelBufferPool) else {
+      writer.cancelWriting()
+      throw WriterError.pixelBuffer
+    }
+
+    let durationSeconds = max(0.1, Double(durationMs) / 1000.0)
+    let timescale: CMTimeScale = 600
+    let endTime = CMTime(seconds: durationSeconds, preferredTimescale: timescale)
+
+    // Append the same still frame at start and end so the encoded track spans
+    // the full duration (a single sample at .zero yields a ~0s track). The input
+    // is non-realtime, so it is ready to accept both samples right away.
+    while !input.isReadyForMoreMediaData { usleep(2000) }
+    adaptor.append(buffer, withPresentationTime: .zero)
+    while !input.isReadyForMoreMediaData { usleep(2000) }
+    adaptor.append(buffer, withPresentationTime: endTime)
+
+    input.markAsFinished()
+    writer.endSession(atSourceTime: endTime)
+
+    await withCheckedContinuation { (continuation: CheckedContinuation<Void, Never>) in
+      writer.finishWriting { continuation.resume() }
+    }
+
+    if writer.status != .completed {
+      throw WriterError.write
+    }
+    return outURL
+  }
+
+  private static func loadImage(_ uri: String) -> UIImage? {
+    if uri.hasPrefix("/") { return UIImage(contentsOfFile: uri) }
+    if let url = URL(string: uri) {
+      if url.isFileURL { return UIImage(contentsOfFile: url.path) }
+      if let data = try? Data(contentsOf: url) { return UIImage(data: data) }
+    }
+    return UIImage(contentsOfFile: uri)
+  }
+
+  private static func outputSize(_ w: Int, _ h: Int, maxSide: Int) -> (Int, Int) {
+    var outW = w
+    var outH = h
+    let cap = maxSide > 0 ? maxSide : 1920
+    let longer = max(w, h)
+    if longer > cap {
+      let scale = Double(cap) / Double(longer)
+      outW = Int((Double(w) * scale).rounded())
+      outH = Int((Double(h) * scale).rounded())
+    }
+    if outW % 2 != 0 { outW -= 1 }
+    if outH % 2 != 0 { outH -= 1 }
+    return (max(2, outW), max(2, outH))
+  }
+
+  private static func makePixelBuffer(cgImage: CGImage, width: Int, height: Int, pool: CVPixelBufferPool?) -> CVPixelBuffer? {
+    var pixelBuffer: CVPixelBuffer?
+    if let pool = pool {
+      CVPixelBufferPoolCreatePixelBuffer(kCFAllocatorDefault, pool, &pixelBuffer)
+    }
+    if pixelBuffer == nil {
+      let attrs: [String: Any] = [
+        kCVPixelBufferCGImageCompatibilityKey as String: true,
+        kCVPixelBufferCGBitmapContextCompatibilityKey as String: true,
+      ]
+      CVPixelBufferCreate(kCFAllocatorDefault, width, height, kCVPixelFormatType_32ARGB, attrs as CFDictionary, &pixelBuffer)
+    }
+    guard let buffer = pixelBuffer else { return nil }
+
+    CVPixelBufferLockBaseAddress(buffer, [])
+    defer { CVPixelBufferUnlockBaseAddress(buffer, []) }
+
+    guard let context = CGContext(
+      data: CVPixelBufferGetBaseAddress(buffer),
+      width: width,
+      height: height,
+      bitsPerComponent: 8,
+      bytesPerRow: CVPixelBufferGetBytesPerRow(buffer),
+      space: CGColorSpaceCreateDeviceRGB(),
+      bitmapInfo: CGImageAlphaInfo.noneSkipFirst.rawValue
+    ) else {
+      return nil
+    }
+
+    context.setFillColor(UIColor.black.cgColor)
+    context.fill(CGRect(x: 0, y: 0, width: width, height: height))
+
+    let imgW = CGFloat(cgImage.width)
+    let imgH = CGFloat(cgImage.height)
+    let scale = max(CGFloat(width) / imgW, CGFloat(height) / imgH)
+    let drawW = imgW * scale
+    let drawH = imgH * scale
+    let x = (CGFloat(width) - drawW) / 2
+    let y = (CGFloat(height) - drawH) / 2
+    context.draw(cgImage, in: CGRect(x: x, y: y, width: drawW, height: drawH))
+
+    return buffer
+  }
+}

package/ios/Records.swift

@@ -0,0 +1,41 @@
+import ExpoModulesCore
+
+struct VideoSourceRecord: Record {
+  @Field var uri: String = ""
+}
+
+struct SeekRecord: Record {
+  @Field var seq: Int = 0
+  @Field var positionMs: Int = 0
+}
+
+struct OverlayRecord: Record {
+  @Field var uri: String = ""
+  @Field var animated: Bool = false
+  @Field var centerX: Double = 0.5
+  @Field var centerY: Double = 0.5
+  @Field var widthFraction: Double = 0.0
+  @Field var heightFraction: Double = 0.0
+  @Field var rotationDeg: Double = 0.0
+}
+
+struct AudioRecord: Record {
+  @Field var uri: String = ""
+  @Field var trimStartMs: Int = 0
+  @Field var trimEndMs: Int = 0
+  @Field var volume: Double = 1
+  @Field var loop: Bool = true
+}
+
+struct ExportPayload: Record {
+  @Field var sourceUri: String = ""
+  @Field var startMs: Int = 0
+  @Field var endMs: Int = 0
+  @Field var imageDurationMs: Int = 0
+  @Field var resolution: Int = 0
+  @Field var bitrate: Int = 0
+  @Field var colorMatrix: [Double] = []
+  @Field var overlays: [OverlayRecord] = []
+  @Field var audio: AudioRecord?
+  @Field var originalVolume: Double = 1
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@igorpache/expo-video-editor",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "High-performance Stories-style video editor for Expo/React Native (native pipeline, agnostic audio, Giphy)",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "keywords": [
+    "react-native",
+    "expo",
+    "expo-video-editor",
+    "ExpoVideoEditor"
+  ],
+  "repository": "https://github.com/GleidsonDaniel/expo-video-editor",
+  "author": "Gleidson Daniel <gleidson10daniel@gmail.com> (https://github.com/GleidsonDaniel)",
+  "license": "MIT",
+  "dependencies": {
+    "zustand": "^5.0.2"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": "*",
+    "lucide-react-native": "*",
+    "react-native-view-shot": "*",
+    "expo-video-thumbnails": "*",
+    "expo-image": "*",
+    "expo-audio": "*",
+    "expo-file-system": "*"
+  }
+}

package/src/components/EditorRoot.tsx

@@ -0,0 +1,180 @@
+import { Platform, Pressable, StatusBar as RNStatusBar, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Music, Sparkles, Sticker, Type, X } from 'lucide-react-native';
+
+import { useAudioPreview } from '../hooks/useAudioPreview';
+import { useExport, type ExportCallbacks } from '../hooks/useExport';
+import { type ActivePanel, useEditorStore } from '../state/store';
+import { type EditorTheme, useTheme } from '../theme';
+import type { EditorState, ExportOptions } from '../types';
+import { ExportOverlay } from './ExportOverlay';
+import { PreviewSurface } from './PreviewSurface';
+import { FilterCarousel } from './filters/FilterCarousel';
+import { GiphyPicker } from './giphy/GiphyPicker';
+import { TextEditorSheet } from './overlays/TextEditorSheet';
+import { TrimTimeline } from './timeline/TrimTimeline';
+
+type Props = {
+  exportOptions: ExportOptions;
+  callbacks: ExportCallbacks;
+  onRequestExport?: (state: EditorState, options: ExportOptions) => void;
+  onCancel?: () => void;
+};
+
+export function EditorRoot({ exportOptions, callbacks, onRequestExport, onCancel }: Props) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const paused = useEditorStore((s) => s.paused);
+  const togglePlay = useEditorStore((s) => s.togglePlay);
+  const hasMeta = useEditorStore((s) => s.meta != null);
+  const activePanel = useEditorStore((s) => s.activePanel);
+  const setActivePanel = useEditorStore((s) => s.setActivePanel);
+  const addTextOverlay = useEditorStore((s) => s.addTextOverlay);
+  const giphyApiKey = useEditorStore((s) => s.giphyApiKey);
+  const audio = useEditorStore((s) => s.audio);
+  const audioPicker = useEditorStore((s) => s.audioPicker);
+  const setAudioFromSource = useEditorStore((s) => s.setAudioFromSource);
+  const getEditorState = useEditorStore((s) => s.getEditorState);
+  const { run, cancel } = useExport(exportOptions, callbacks);
+
+  const onProceed = () => {
+    if (onRequestExport) onRequestExport(getEditorState(), exportOptions);
+    else run();
+  };
+
+  const topPad =
+    Platform.OS === 'android'
+      ? Math.max(insets.top, RNStatusBar.currentHeight ?? 0)
+      : insets.top;
+
+  useAudioPreview();
+
+  const toggle = (panel: ActivePanel) => setActivePanel(activePanel === panel ? 'none' : panel);
+
+  const onMusic = async () => {
+    if (!audioPicker) return;
+    const source = await audioPicker();
+    if (source) setAudioFromSource(source);
+  };
+
+  return (
+    <View style={[styles.root, { backgroundColor: theme.background }]}>
+      <View style={[styles.header, { paddingTop: topPad + 20 }]}>
+        <Pressable onPress={onCancel} hitSlop={12} style={styles.headerBtn}>
+          <X size={22} color="#fff" />
+        </Pressable>
+        <View style={styles.tools}>
+          <IconTool active={activePanel === 'filter'} onPress={() => toggle('filter')} theme={theme}>
+            <Sparkles size={20} color="#fff" />
+          </IconTool>
+          <IconTool active={false} onPress={() => addTextOverlay()} theme={theme}>
+            <Type size={20} color="#fff" />
+          </IconTool>
+          {giphyApiKey ? (
+            <IconTool active={activePanel === 'giphy'} onPress={() => setActivePanel('giphy')} theme={theme}>
+              <Sticker size={20} color="#fff" />
+            </IconTool>
+          ) : null}
+          {audioPicker || audio ? (
+            <IconTool active={activePanel === 'audio'} onPress={onMusic} theme={theme}>
+              <Music size={20} color="#fff" />
+            </IconTool>
+          ) : null}
+        </View>
+      </View>
+
+      <View style={styles.preview}>
+        <PreviewSurface />
+        <Pressable style={styles.tapLayer} onPress={togglePlay}>
+          {paused ? <Text style={styles.playIcon}>▶</Text> : null}
+        </Pressable>
+        {activePanel === 'filter' ? (
+          <View style={styles.filterOverlay}>
+            <FilterCarousel />
+          </View>
+        ) : null}
+      </View>
+
+      <View style={[styles.bottom, { paddingBottom: insets.bottom + 16 }]}>
+        {hasMeta ? <TrimTimeline /> : null}
+        <Pressable style={[styles.proceedBtn, { backgroundColor: theme.accent }]} onPress={onProceed}>
+          <Text style={styles.proceedText}>Prosseguir</Text>
+        </Pressable>
+      </View>
+
+      <TextEditorSheet />
+      <GiphyPicker />
+
+      <ExportOverlay
+        onCancel={() => {
+          cancel();
+          onCancel?.();
+        }}
+      />
+    </View>
+  );
+}
+
+function IconTool({
+  children,
+  active,
+  onPress,
+  theme,
+}: {
+  children: React.ReactNode;
+  active: boolean;
+  onPress: () => void;
+  theme: EditorTheme;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      hitSlop={8}
+      style={[styles.iconBtn, { backgroundColor: active ? theme.accent : 'rgba(0,0,0,0.35)' }]}>
+      {children}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+    zIndex: 2,
+  },
+  headerBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.35)',
+  },
+  tools: { flexDirection: 'row', alignItems: 'center', gap: 4 },
+  iconBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  preview: { flex: 1 },
+  tapLayer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playIcon: { color: 'rgba(255,255,255,0.9)', fontSize: 56 },
+  filterOverlay: { position: 'absolute', left: 0, right: 0, bottom: 12 },
+  bottom: { paddingHorizontal: 16, paddingTop: 12, gap: 14 },
+  proceedBtn: { borderRadius: 28, paddingVertical: 14, alignItems: 'center' },
+  proceedText: { color: '#fff', fontSize: 16, fontWeight: '700' },
+});

package/src/components/ExportOverlay.tsx

@@ -0,0 +1,44 @@
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useEditorStore } from '../state/store';
+import { useTheme } from '../theme';
+
+export function ExportOverlay({ onCancel }: { onCancel: () => void }) {
+  const exporting = useEditorStore((s) => s.exporting);
+  const progress = useEditorStore((s) => s.exportProgress);
+  const theme = useTheme();
+
+  if (!exporting) return null;
+  const pct = Math.round(progress * 100);
+
+  return (
+    <View style={styles.overlay}>
+      <ActivityIndicator color={theme.accent} size="large" />
+      <Text style={[styles.pct, { color: theme.text }]}>{pct}%</Text>
+      <View style={styles.barBg}>
+        <View style={[styles.barFill, { width: `${pct}%`, backgroundColor: theme.accent }]} />
+      </View>
+      <Pressable onPress={onCancel} hitSlop={12}>
+        <Text style={[styles.cancel, { color: theme.textMuted }]}>Cancel</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.85)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 16,
+  },
+  pct: { fontSize: 28, fontWeight: '700' },
+  barBg: { width: '60%', height: 4, borderRadius: 2, backgroundColor: 'rgba(255,255,255,0.15)' },
+  barFill: { height: 4, borderRadius: 2 },
+  cancel: { fontSize: 15, marginTop: 8 },
+});

package/src/components/PreviewSurface.tsx

@@ -0,0 +1,49 @@
+import { StyleSheet, View } from 'react-native';
+
+import { getFilterMatrix, isIdentityFilter } from '../filters/presets';
+import EditorVideoView from '../native/EditorVideoView';
+import { useEditorStore } from '../state/store';
+import { OverlayLayer } from './overlays/OverlayLayer';
+
+export function PreviewSurface() {
+  const source = useEditorStore((s) => s.source);
+  const paused = useEditorStore((s) => s.paused);
+  const trimStart = useEditorStore((s) => s.trim.start);
+  const trimEnd = useEditorStore((s) => s.trim.end);
+  const filter = useEditorStore((s) => s.filter);
+  const seekNonce = useEditorStore((s) => s.seekNonce);
+  const seekTarget = useEditorStore((s) => s.seekTarget);
+  const setMeta = useEditorStore((s) => s.setMeta);
+  const setPlayhead = useEditorStore((s) => s.setPlayhead);
+  const setPreviewSize = useEditorStore((s) => s.setPreviewSize);
+
+  const colorMatrix = isIdentityFilter(filter) ? [] : getFilterMatrix(filter);
+
+  if (!source.uri) return <View style={styles.container} />;
+
+  return (
+    <View
+      style={styles.container}
+      onLayout={(e) => setPreviewSize(e.nativeEvent.layout.width, e.nativeEvent.layout.height)}>
+      <EditorVideoView
+        style={StyleSheet.absoluteFill}
+        source={source}
+        paused={paused}
+        loopStartMs={Math.round(trimStart * 1000)}
+        loopEndMs={Math.round(trimEnd * 1000)}
+        seek={{ seq: seekNonce, positionMs: Math.round(seekTarget * 1000) }}
+        colorMatrix={colorMatrix}
+        onLoad={(e) => {
+          const { durationMs, width, height, rotationDeg } = e.nativeEvent;
+          setMeta({ duration: durationMs / 1000, width, height, rotation: rotationDeg });
+        }}
+        onProgress={(e) => setPlayhead(e.nativeEvent.positionMs / 1000)}
+      />
+      <OverlayLayer />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#000', overflow: 'hidden' },
+});

package/src/components/VideoEditor.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useEditorStore } from '../state/store';
+import { EditorThemeContext, mergeTheme } from '../theme';
+import type { VideoEditorProps } from '../types';
+import { EditorRoot } from './EditorRoot';
+
+export function VideoEditor(props: VideoEditorProps) {
+  const init = useEditorStore((s) => s.init);
+  const setGiphyApiKey = useEditorStore((s) => s.setGiphyApiKey);
+  const setAudioPicker = useEditorStore((s) => s.setAudioPicker);
+  const theme = useMemo(() => mergeTheme(props.theme), [props.theme]);
+
+  useEffect(() => {
+    init(props.source);
+  }, [props.source.uri, init]);
+
+  useEffect(() => {
+    setGiphyApiKey(props.giphy?.apiKey ?? null);
+  }, [props.giphy?.apiKey, setGiphyApiKey]);
+
+  useEffect(() => {
+    setAudioPicker(props.audio?.onPickAudio ?? null);
+  }, [props.audio?.onPickAudio, setAudioPicker]);
+
+  const callbacks = useMemo(
+    () => ({
+      onExportStart: props.onExportStart,
+      onExportProgress: props.onExportProgress,
+      onExportComplete: props.onExportComplete,
+      onExportError: props.onExportError,
+    }),
+    [props.onExportStart, props.onExportProgress, props.onExportComplete, props.onExportError]
+  );
+
+  return (
+    <View style={[styles.root, props.style]}>
+      <EditorThemeContext.Provider value={theme}>
+        <EditorRoot
+          exportOptions={props.export ?? {}}
+          callbacks={callbacks}
+          onRequestExport={props.onRequestExport}
+          onCancel={props.onCancel}
+        />
+      </EditorThemeContext.Provider>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({ root: { flex: 1 } });

package/src/components/audio/AudioPanel.tsx

@@ -0,0 +1,69 @@
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { AudioScrubber } from './AudioScrubber';
+import { Slider } from './Slider';
+import { useEditorStore } from '../../state/store';
+import { useTheme } from '../../theme';
+
+export function AudioPanel() {
+  const activePanel = useEditorStore((s) => s.activePanel);
+  const setActivePanel = useEditorStore((s) => s.setActivePanel);
+  const audio = useEditorStore((s) => s.audio);
+  const originalVolume = useEditorStore((s) => s.originalVolume);
+  const updateAudio = useEditorStore((s) => s.updateAudio);
+  const clearAudio = useEditorStore((s) => s.clearAudio);
+  const setOriginalVolume = useEditorStore((s) => s.setOriginalVolume);
+  const theme = useTheme();
+
+  if (activePanel !== 'audio' || !audio) return null;
+  const close = () => setActivePanel('none');
+
+  return (
+    <Modal transparent visible animationType="slide" onRequestClose={close}>
+      <View style={styles.backdrop}>
+        <View style={[styles.sheet, { backgroundColor: theme.background }]}>
+          <View style={styles.topbar}>
+            <Pressable hitSlop={12} onPress={clearAudio}>
+              <Text style={[styles.action, { color: theme.danger }]}>Remove</Text>
+            </Pressable>
+            <Text style={[styles.title, { color: theme.text }]} numberOfLines={1}>
+              {audio.title ?? 'Audio'}
+            </Text>
+            <Pressable hitSlop={12} onPress={close}>
+              <Text style={[styles.action, { color: theme.accent }]}>Done</Text>
+            </Pressable>
+          </View>
+
+          <Text style={[styles.label, { color: theme.textMuted }]}>Selection</Text>
+          <AudioScrubber />
+
+          <Text style={[styles.label, { color: theme.textMuted }]}>Music volume</Text>
+          <Slider value={audio.volume} onChange={(v) => updateAudio({ volume: v })} />
+
+          <Text style={[styles.label, { color: theme.textMuted }]}>Original video volume</Text>
+          <Slider value={originalVolume} onChange={setOriginalVolume} />
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' },
+  sheet: {
+    padding: 20,
+    paddingBottom: 40,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    gap: 10,
+  },
+  topbar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  title: { fontSize: 15, fontWeight: '600', flex: 1, textAlign: 'center', marginHorizontal: 12 },
+  action: { fontSize: 15, fontWeight: '700' },
+  label: { fontSize: 12, marginTop: 8 },
+});