@igorpache/expo-video-editor 0.1.0

package/src/components/overlays/TextOverlayView.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+
+import { useOverlayGestures } from '../../hooks/useOverlayGestures';
+import { registerOverlayRef } from '../../overlays/captureRegistry';
+import { useEditorStore } from '../../state/store';
+import type { TextOverlay } from '../../types';
+
+export function TextOverlayView({ overlay }: { overlay: TextOverlay }) {
+  const { gesture, animatedStyle } = useOverlayGestures(overlay);
+  const updateOverlay = useEditorStore((s) => s.updateOverlay);
+  const setActivePanel = useEditorStore((s) => s.setActivePanel);
+  const selectOverlay = useEditorStore((s) => s.selectOverlay);
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={[styles.wrapper, animatedStyle]}>
+        <View
+          ref={(v) => registerOverlayRef(overlay.id, v)}
+          collapsable={false}
+          onLayout={(e) => {
+            const { width, height } = e.nativeEvent.layout;
+            if (
+              Math.abs((overlay.baseWidth ?? 0) - width) > 0.5 ||
+              Math.abs((overlay.baseHeight ?? 0) - height) > 0.5
+            ) {
+              updateOverlay(overlay.id, { baseWidth: width, baseHeight: height });
+            }
+          }}
+          onTouchEnd={() => {
+            selectOverlay(overlay.id);
+            setActivePanel('text');
+          }}
+          style={[
+            styles.content,
+            overlay.backgroundColor ? { backgroundColor: overlay.backgroundColor } : null,
+          ]}>
+          <Text
+            style={{
+              color: overlay.color,
+              fontSize: overlay.fontSize,
+              fontFamily: overlay.fontFamily,
+              textAlign: overlay.align,
+            }}>
+            {overlay.text || ' '}
+          </Text>
+        </View>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: { position: 'absolute', top: 0, left: 0 },
+  content: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+});

package/src/components/timeline/ThumbnailStrip.tsx

@@ -0,0 +1,63 @@
+import * as VideoThumbnails from 'expo-video-thumbnails';
+import { useEffect, useState } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+
+type Props = { uri: string; duration: number; count?: number };
+
+export function ThumbnailStrip({ uri, duration, count = 12 }: Props) {
+  const [thumbs, setThumbs] = useState<string[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!uri || duration <= 0) {
+      setThumbs([]);
+      return;
+    }
+    (async () => {
+      const out: string[] = [];
+      for (let i = 0; i < count; i++) {
+        const t = (duration * (i + 0.5)) / count;
+        try {
+          const { uri: thumb } = await VideoThumbnails.getThumbnailAsync(uri, {
+            time: Math.round(t * 1000),
+            quality: 0.4,
+          });
+          if (cancelled) return;
+          out.push(thumb);
+          setThumbs([...out]);
+        } catch {
+          if (cancelled) return;
+          out.push('');
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [uri, duration, count]);
+
+  return (
+    <View style={styles.row} pointerEvents="none">
+      {Array.from({ length: count }).map((_, i) => (
+        <View key={i} style={styles.cell}>
+          {thumbs[i] ? <Image source={{ uri: thumbs[i] }} style={styles.img} /> : null}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    overflow: 'hidden',
+    borderRadius: 8,
+  },
+  cell: { flex: 1, backgroundColor: '#000' },
+  img: { width: '100%', height: '100%' },
+});

package/src/components/timeline/TrimTimeline.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+
+import { ThumbnailStrip } from './ThumbnailStrip';
+import { useEditorStore } from '../../state/store';
+import { useTheme } from '../../theme';
+
+const HANDLE_W = 22;
+const TRACK_H = 60;
+const MIN_GAP_S = 0.5;
+
+export function TrimTimeline() {
+  const uri = useEditorStore((s) => s.source.uri);
+  const duration = useEditorStore((s) => s.meta?.duration ?? 0);
+  const trimStart = useEditorStore((s) => s.trim.start);
+  const trimEnd = useEditorStore((s) => s.trim.end);
+  const setTrim = useEditorStore((s) => s.setTrim);
+  const requestSeek = useEditorStore((s) => s.requestSeek);
+  const theme = useTheme();
+
+  const [w, setW] = useState(0);
+  const startX = useSharedValue(0);
+  const endX = useSharedValue(0);
+  const baseStart = useSharedValue(0);
+  const baseEnd = useSharedValue(0);
+  const draggingRef = useRef(false);
+
+  const pxPerSec = duration > 0 && w > 0 ? w / duration : 0;
+  const minGapPx = MIN_GAP_S * pxPerSec;
+
+  useEffect(() => {
+    if (draggingRef.current || pxPerSec === 0) return;
+    startX.value = trimStart * pxPerSec;
+    endX.value = trimEnd * pxPerSec;
+  }, [trimStart, trimEnd, pxPerSec, startX, endX]);
+
+  const setDragging = (v: boolean) => {
+    draggingRef.current = v;
+  };
+  const commit = () => {
+    if (pxPerSec > 0) setTrim(startX.value / pxPerSec, endX.value / pxPerSec);
+  };
+  const seekToPx = (px: number) => {
+    if (pxPerSec > 0) requestSeek(px / pxPerSec);
+  };
+
+  const startPan = Gesture.Pan()
+    .onStart(() => {
+      baseStart.value = startX.value;
+      runOnJS(setDragging)(true);
+    })
+    .onUpdate((e) => {
+      let x = baseStart.value + e.translationX;
+      x = Math.max(0, Math.min(x, endX.value - minGapPx));
+      startX.value = x;
+      runOnJS(seekToPx)(x);
+    })
+    .onEnd(() => {
+      runOnJS(commit)();
+      runOnJS(setDragging)(false);
+    });
+
+  const endPan = Gesture.Pan()
+    .onStart(() => {
+      baseEnd.value = endX.value;
+      runOnJS(setDragging)(true);
+    })
+    .onUpdate((e) => {
+      let x = baseEnd.value + e.translationX;
+      x = Math.min(w, Math.max(x, startX.value + minGapPx));
+      endX.value = x;
+      runOnJS(seekToPx)(x);
+    })
+    .onEnd(() => {
+      runOnJS(commit)();
+      runOnJS(setDragging)(false);
+    });
+
+  const selStyle = useAnimatedStyle(() => ({
+    left: startX.value,
+    width: Math.max(0, endX.value - startX.value),
+  }));
+  const leftHandleStyle = useAnimatedStyle(() => ({ left: startX.value - HANDLE_W }));
+  const rightHandleStyle = useAnimatedStyle(() => ({ left: endX.value }));
+  const leftDimStyle = useAnimatedStyle(() => ({ left: 0, width: startX.value }));
+  const rightDimStyle = useAnimatedStyle(() => ({
+    left: endX.value,
+    width: Math.max(0, w - endX.value),
+  }));
+
+  return (
+    <View
+      style={[styles.track, { height: TRACK_H }]}
+      onLayout={(e) => setW(e.nativeEvent.layout.width)}>
+      <ThumbnailStrip uri={uri} duration={duration} />
+
+      <Animated.View style={[styles.dim, leftDimStyle]} pointerEvents="none" />
+      <Animated.View style={[styles.dim, rightDimStyle]} pointerEvents="none" />
+
+      <Animated.View
+        style={[styles.selection, { borderColor: theme.accent }, selStyle]}
+        pointerEvents="none"
+      />
+
+      <Playhead duration={duration} width={w} />
+
+      <GestureDetector gesture={startPan}>
+        <Animated.View style={[styles.handle, { backgroundColor: theme.accent }, leftHandleStyle]}>
+          <View style={styles.grip} />
+        </Animated.View>
+      </GestureDetector>
+      <GestureDetector gesture={endPan}>
+        <Animated.View style={[styles.handle, { backgroundColor: theme.accent }, rightHandleStyle]}>
+          <View style={styles.grip} />
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+}
+
+function Playhead({ duration, width }: { duration: number; width: number }) {
+  const playhead = useEditorStore((s) => s.playhead);
+  if (duration <= 0 || width <= 0) return null;
+  const left = Math.max(0, Math.min(width, (playhead / duration) * width));
+  return <View style={[styles.playhead, { left }]} pointerEvents="none" />;
+}
+
+const styles = StyleSheet.create({
+  track: { width: '100%', justifyContent: 'center' },
+  dim: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.55)',
+    borderRadius: 8,
+  },
+  selection: { position: 'absolute', top: 0, bottom: 0, borderWidth: 2, borderRadius: 8 },
+  handle: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: HANDLE_W,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8,
+  },
+  grip: { width: 3, height: 20, borderRadius: 2, backgroundColor: 'rgba(255,255,255,0.9)' },
+  playhead: { position: 'absolute', top: -2, bottom: -2, width: 2, backgroundColor: '#fff' },
+});

package/src/errors.ts

@@ -0,0 +1,33 @@
+export type EditorErrorCode =
+  'EXPORT_FAILED' | 'CANCELLED' | 'SOURCE_LOAD' | 'AUDIO_LOAD' | 'GIPHY_NETWORK' | 'UNSUPPORTED';
+
+export class EditorError extends Error {
+  readonly code: EditorErrorCode;
+  readonly cause?: unknown;
+
+  constructor(code: EditorErrorCode, message: string, cause?: unknown) {
+    super(message);
+    this.name = 'EditorError';
+    this.code = code;
+    this.cause = cause;
+  }
+}
+
+export function toEditorError(
+  e: unknown,
+  fallback: EditorErrorCode = 'EXPORT_FAILED'
+): EditorError {
+  if (e instanceof EditorError) return e;
+  const code = (e as { code?: string })?.code;
+  const message = (e as { message?: string })?.message ?? String(e);
+  const known: EditorErrorCode[] = [
+    'EXPORT_FAILED',
+    'CANCELLED',
+    'SOURCE_LOAD',
+    'AUDIO_LOAD',
+    'GIPHY_NETWORK',
+    'UNSUPPORTED',
+  ];
+  const matched = known.find((k) => k === code) ?? fallback;
+  return new EditorError(matched, message, e);
+}

package/src/filters/presets.ts

@@ -0,0 +1,84 @@
+import type { ColorMatrix } from '../types';
+
+export const IDENTITY_MATRIX: ColorMatrix = [
+  1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0,
+];
+
+export type FilterPreset = { key: string; label: string; matrix: ColorMatrix };
+
+export const FILTER_PRESETS: FilterPreset[] = [
+  { key: 'normal', label: 'Normal', matrix: IDENTITY_MATRIX },
+  {
+    key: 'bw',
+    label: 'B&W',
+    matrix: [
+      0.299, 0.587, 0.114, 0, 0, 0.299, 0.587, 0.114, 0, 0, 0.299, 0.587, 0.114, 0, 0, 0, 0, 0, 1,
+      0,
+    ],
+  },
+  {
+    key: 'vintage',
+    label: 'Vintage',
+    matrix: [
+      0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131, 0, 0, 0, 0, 0, 1,
+      0,
+    ],
+  },
+  {
+    key: 'warm',
+    label: 'Warm',
+    matrix: [1.1, 0, 0, 0, 0.02, 0, 1.05, 0, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 0, 1, 0],
+  },
+  {
+    key: 'cool',
+    label: 'Cool',
+    matrix: [0.9, 0, 0, 0, 0, 0, 1.0, 0, 0, 0, 0, 0, 1.1, 0, 0.02, 0, 0, 0, 1, 0],
+  },
+  {
+    key: 'retro',
+    label: 'Retro',
+    matrix: [0.9, 0.05, 0, 0, 0.07, 0, 0.85, 0.05, 0, 0.07, 0.05, 0, 0.8, 0, 0.09, 0, 0, 0, 1, 0],
+  },
+  {
+    key: 'neon',
+    label: 'Neon',
+    matrix: [
+      1.3505, -0.2935, -0.057, 0, 0, -0.1495, 1.2065, -0.057, 0, 0, -0.1495, -0.2935, 1.443, 0, 0,
+      0, 0, 0, 1, 0,
+    ],
+  },
+  {
+    key: 'sunset',
+    label: 'Sunset',
+    matrix: [1.15, 0.05, 0, 0, 0.03, 0.02, 1.0, 0, 0, 0.01, 0, 0, 0.85, 0, 0, 0, 0, 0, 1, 0],
+  },
+  {
+    key: 'film',
+    label: 'Film',
+    matrix: [
+      1.0, 0.03, 0.02, 0, 0.02, 0.02, 1.0, 0.02, 0, 0.02, 0.02, 0.05, 0.95, 0, 0.02, 0, 0, 0, 1, 0,
+    ],
+  },
+  {
+    key: 'fade',
+    label: 'Fade',
+    matrix: [0.8, 0, 0, 0, 0.1, 0, 0.8, 0, 0, 0.1, 0, 0, 0.8, 0, 0.12, 0, 0, 0, 1, 0],
+  },
+  {
+    key: 'norway',
+    label: 'Norway',
+    matrix: [1.05, 0, 0, 0, 0, 0, 1.0, 0.03, 0, 0, 0, 0.05, 1.05, 0, 0.02, 0, 0, 0, 1, 0],
+  },
+];
+
+const BY_KEY: Record<string, FilterPreset> = Object.fromEntries(
+  FILTER_PRESETS.map((p) => [p.key, p])
+);
+
+export function getFilterMatrix(key: string): ColorMatrix {
+  return (BY_KEY[key] ?? BY_KEY.normal).matrix;
+}
+
+export function isIdentityFilter(key: string): boolean {
+  return key === 'normal';
+}

package/src/hooks/useAudioPreview.ts

@@ -0,0 +1,94 @@
+import { setAudioModeAsync, useAudioPlayer } from 'expo-audio';
+import { useEffect, useRef } from 'react';
+
+import { useEditorStore } from '../state/store';
+
+export function useAudioPreview() {
+  useEffect(() => {
+    setAudioModeAsync({ playsInSilentMode: true }).catch(() => {});
+  }, []);
+
+  const audioUri = useEditorStore((s) => s.audio?.uri ?? null);
+  const volume = useEditorStore((s) => s.audio?.volume ?? 1);
+  const loop = useEditorStore((s) => s.audio?.loop ?? false);
+  const audioTrimStart = useEditorStore((s) => s.audio?.trimStart ?? 0);
+  const audioTrimEnd = useEditorStore((s) => s.audio?.trimEnd ?? 0);
+  const videoTrimStart = useEditorStore((s) => s.trim.start);
+  const paused = useEditorStore((s) => s.paused);
+  const playhead = useEditorStore((s) => s.playhead);
+  const seekNonce = useEditorStore((s) => s.seekNonce);
+  const activePanel = useEditorStore((s) => s.activePanel);
+
+  const player = useAudioPlayer(audioUri ? { uri: audioUri } : null);
+  const active = !!audioUri && activePanel !== 'audio';
+
+  const activeRef = useRef(active);
+  const pausedRef = useRef(paused);
+  const loopRef = useRef(loop);
+  const trimStartRef = useRef(audioTrimStart);
+  const trimEndRef = useRef(audioTrimEnd);
+  activeRef.current = active;
+  pausedRef.current = paused;
+  loopRef.current = loop;
+  trimStartRef.current = audioTrimStart;
+  trimEndRef.current = audioTrimEnd;
+
+  useEffect(() => {
+    try {
+      player.volume = volume;
+    } catch (e) {
+      console.warn('[useAudioPreview] set volume falhou', e);
+    }
+  }, [player, volume]);
+
+  useEffect(() => {
+    if (!active) return;
+    try {
+      player.seekTo(audioTrimStart + Math.max(0, playhead - videoTrimStart)).catch((e) =>
+        console.warn('[useAudioPreview] seekTo do sync falhou', e)
+      );
+    } catch (e) {
+      console.warn('[useAudioPreview] seekTo falhou', e);
+    }
+  }, [seekNonce]);
+
+  useEffect(() => {
+    let started = false;
+    let lastLoopAt = 0;
+    const id = setInterval(() => {
+      try {
+        if (!activeRef.current) {
+          started = false;
+          return;
+        }
+        if (!started) {
+          if (player.duration > 0) {
+            started = true;
+            if (!pausedRef.current) player.play();
+          }
+          return;
+        }
+        if (pausedRef.current) {
+          if (player.playing) player.pause();
+          return;
+        }
+        if (!player.playing) player.play();
+
+        const end = trimEndRef.current;
+        const now = Date.now();
+        if (loopRef.current && end > 0 && player.currentTime >= end && now - lastLoopAt > 300) {
+          lastLoopAt = now;
+          player.seekTo(trimStartRef.current).catch(() => {});
+          player.play();
+        }
+      } catch (e) {
+        if (String(e).includes('already released')) {
+          clearInterval(id);
+          return;
+        }
+        console.warn('[useAudioPreview] loop de playback falhou', e);
+      }
+    }, 150);
+    return () => clearInterval(id);
+  }, [player]);
+}

package/src/hooks/useExport.ts

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+
+import { cancelExport, exportVideo } from '../services/exportService';
+import { useEditorStore } from '../state/store';
+import type { ExportOptions, ExportResult } from '../types';
+
+export type ExportCallbacks = {
+  onExportStart?: () => void;
+  onExportProgress?: (progress: number) => void;
+  onExportComplete?: (result: ExportResult) => void;
+  onExportError?: (error: unknown) => void;
+};
+
+export function useExport(options: ExportOptions = {}, callbacks: ExportCallbacks = {}) {
+  const setExporting = useEditorStore((s) => s.setExporting);
+  const setExportProgress = useEditorStore((s) => s.setExportProgress);
+  const getEditorState = useEditorStore((s) => s.getEditorState);
+
+  const run = useCallback(async (): Promise<ExportResult | undefined> => {
+    setExporting(true);
+    setExportProgress(0);
+    callbacks.onExportStart?.();
+    try {
+      const result = await exportVideo(getEditorState(), options, (p) => {
+        setExportProgress(p);
+        callbacks.onExportProgress?.(p);
+      });
+      callbacks.onExportComplete?.(result);
+      return result;
+    } catch (e) {
+      callbacks.onExportError?.(e);
+      return undefined;
+    } finally {
+      setExporting(false);
+    }
+  }, [options, callbacks, getEditorState, setExporting, setExportProgress]);
+
+  const cancel = useCallback(() => cancelExport(), []);
+
+  return { run, cancel };
+}

package/src/hooks/useOverlayGestures.ts

@@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+
+import { useEditorStore } from '../state/store';
+import type { Overlay } from '../types';
+
+export function useOverlayGestures(overlay: Overlay) {
+  const previewW = useEditorStore((s) => s.previewSize.width);
+  const previewH = useEditorStore((s) => s.previewSize.height);
+  const updateOverlay = useEditorStore((s) => s.updateOverlay);
+  const selectOverlay = useEditorStore((s) => s.selectOverlay);
+
+  const baseW = overlay.baseWidth ?? 0;
+  const baseH = overlay.baseHeight ?? 0;
+
+  const cx = useSharedValue(overlay.transform.x * previewW);
+  const cy = useSharedValue(overlay.transform.y * previewH);
+  const scale = useSharedValue(overlay.transform.scale);
+  const rot = useSharedValue(overlay.transform.rotation);
+
+  const startCx = useSharedValue(0);
+  const startCy = useSharedValue(0);
+  const startScale = useSharedValue(1);
+  const startRot = useSharedValue(0);
+
+  useEffect(() => {
+    cx.value = overlay.transform.x * previewW;
+    cy.value = overlay.transform.y * previewH;
+    scale.value = overlay.transform.scale;
+    rot.value = overlay.transform.rotation;
+  }, [overlay.transform, previewW, previewH, cx, cy, scale, rot]);
+
+  const commit = () => {
+    if (previewW > 0 && previewH > 0) {
+      updateOverlay(overlay.id, {
+        transform: {
+          x: cx.value / previewW,
+          y: cy.value / previewH,
+          scale: scale.value,
+          rotation: rot.value,
+        },
+      });
+    }
+  };
+  const select = () => selectOverlay(overlay.id);
+
+  const pan = Gesture.Pan()
+    .onStart(() => {
+      startCx.value = cx.value;
+      startCy.value = cy.value;
+      runOnJS(select)();
+    })
+    .onUpdate((e) => {
+      cx.value = startCx.value + e.translationX;
+      cy.value = startCy.value + e.translationY;
+    })
+    .onEnd(() => runOnJS(commit)());
+
+  const pinch = Gesture.Pinch()
+    .onStart(() => {
+      startScale.value = scale.value;
+    })
+    .onUpdate((e) => {
+      scale.value = Math.max(0.2, startScale.value * e.scale);
+    })
+    .onEnd(() => runOnJS(commit)());
+
+  const rotation = Gesture.Rotation()
+    .onStart(() => {
+      startRot.value = rot.value;
+    })
+    .onUpdate((e) => {
+      rot.value = startRot.value + e.rotation;
+    })
+    .onEnd(() => runOnJS(commit)());
+
+  const gesture = Gesture.Simultaneous(pan, pinch, rotation);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: cx.value - baseW / 2 },
+      { translateY: cy.value - baseH / 2 },
+      { scale: scale.value },
+      { rotate: `${rot.value}rad` },
+    ],
+  }));
+
+  return { gesture, animatedStyle };
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+export { VideoEditor } from './components/VideoEditor';
+export { useEditorStore as useVideoEditor } from './state/store';
+export {
+  exportVideo,
+  exportImageVideo,
+  captureOverlays,
+  runVideoExport,
+  cancelExport,
+  type ExportImageVideoParams,
+  type ImageVideoAudio,
+} from './services/exportService';
+export type { NativeOverlay } from './native/VideoEditorModule';
+export { FILTER_PRESETS, getFilterMatrix, isIdentityFilter, type FilterPreset } from './filters/presets';
+export {
+  trendingGifs,
+  searchGifs,
+  type GiphyItem,
+  type GiphyKind,
+} from './services/giphyClient';
+export {
+  type MusicCatalog,
+  type MusicTrack,
+  type MusicQueryOptions,
+} from './services/musicCatalog';
+export { createFeedfmCatalog, type FeedfmConfig } from './services/feedfmCatalog';
+export { createDemoCatalog } from './services/demoCatalog';
+export { EditorError, type EditorErrorCode } from './errors';
+export { defaultTheme, type EditorTheme } from './theme';
+export * from './types';

package/src/native/EditorVideoView.tsx

@@ -0,0 +1,27 @@
+import { requireNativeView } from 'expo';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type NativeLoadEvent = {
+  durationMs: number;
+  width: number;
+  height: number;
+  rotationDeg: number;
+};
+export type NativeProgressEvent = { positionMs: number };
+
+export type EditorVideoNativeProps = {
+  source: { uri: string };
+  paused: boolean;
+  loopStartMs: number;
+  loopEndMs: number;
+  seek: { seq: number; positionMs: number };
+  colorMatrix: number[];
+  onLoad?: (event: { nativeEvent: NativeLoadEvent }) => void;
+  onProgress?: (event: { nativeEvent: NativeProgressEvent }) => void;
+  onEnded?: (event: { nativeEvent: Record<string, never> }) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const EditorVideoView = requireNativeView<EditorVideoNativeProps>('ExpoVideoEditor');
+
+export default EditorVideoView;