@igorpache/expo-video-editor 0.1.0

package/src/components/audio/AudioScrubber.tsx

@@ -0,0 +1,177 @@
+import { useAudioPlayer, useAudioPlayerStatus } from 'expo-audio';
+import { useEffect, useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+
+import { useEditorStore } from '../../state/store';
+import { useTheme } from '../../theme';
+
+const HANDLE_W = 20;
+const TRACK_H = 56;
+const MIN_GAP_S = 0.5;
+
+export function AudioScrubber() {
+  const audio = useEditorStore((s) => s.audio);
+  const updateAudio = useEditorStore((s) => s.updateAudio);
+  const theme = useTheme();
+
+  const player = useAudioPlayer(audio ? { uri: audio.uri } : null);
+  const status = useAudioPlayerStatus(player);
+  const [playing, setPlaying] = useState(false);
+  const [w, setW] = useState(0);
+
+  const duration = audio?.duration && audio.duration > 0 ? audio.duration : status.duration || 0;
+
+  useEffect(() => {
+    if (audio && (!audio.duration || audio.duration <= 0) && status.duration > 0) {
+      updateAudio({
+        duration: status.duration,
+        trimEnd: audio.trimEnd > 0 ? audio.trimEnd : status.duration,
+      });
+    }
+  }, [status.duration, audio, updateAudio]);
+
+  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 || !audio) return;
+    startX.value = audio.trimStart * pxPerSec;
+    endX.value = audio.trimEnd * pxPerSec;
+  }, [audio, pxPerSec, startX, endX]);
+
+  const setDragging = (v: boolean) => {
+    draggingRef.current = v;
+  };
+  const commit = () => {
+    if (pxPerSec > 0)
+      updateAudio({ trimStart: startX.value / pxPerSec, trimEnd: endX.value / pxPerSec });
+  };
+  const seekSolo = (px: number) => {
+    if (pxPerSec > 0) {
+      try {
+        player.seekTo(px / pxPerSec);
+      } catch {}
+    }
+  };
+
+  const startPan = Gesture.Pan()
+    .onStart(() => {
+      baseStart.value = startX.value;
+      runOnJS(setDragging)(true);
+    })
+    .onUpdate((e) => {
+      let v = baseStart.value + e.translationX;
+      v = Math.max(0, Math.min(v, endX.value - minGapPx));
+      startX.value = v;
+      runOnJS(seekSolo)(v);
+    })
+    .onEnd(() => {
+      runOnJS(commit)();
+      runOnJS(setDragging)(false);
+    });
+
+  const endPan = Gesture.Pan()
+    .onStart(() => {
+      baseEnd.value = endX.value;
+      runOnJS(setDragging)(true);
+    })
+    .onUpdate((e) => {
+      let v = baseEnd.value + e.translationX;
+      v = Math.min(w, Math.max(v, startX.value + minGapPx));
+      endX.value = v;
+    })
+    .onEnd(() => {
+      runOnJS(commit)();
+      runOnJS(setDragging)(false);
+    });
+
+  useEffect(() => {
+    if (!playing || !audio) return;
+    const id = setInterval(() => {
+      try {
+        if (player.currentTime >= audio.trimEnd || player.currentTime < audio.trimStart - 0.1) {
+          player.seekTo(audio.trimStart);
+        }
+      } catch {}
+    }, 150);
+    return () => clearInterval(id);
+  }, [playing, audio, player]);
+
+  useEffect(
+    () => () => {
+      try {
+        player.pause();
+      } catch {}
+    },
+    [player]
+  );
+
+  const togglePlay = () => {
+    try {
+      if (playing) {
+        player.pause();
+        setPlaying(false);
+      } else {
+        player.seekTo(audio?.trimStart ?? 0);
+        player.play();
+        setPlaying(true);
+      }
+    } catch {}
+  };
+
+  const selStyle = useAnimatedStyle(() => ({
+    left: startX.value,
+    width: Math.max(0, endX.value - startX.value),
+  }));
+  const leftHandle = useAnimatedStyle(() => ({ left: startX.value - HANDLE_W }));
+  const rightHandle = useAnimatedStyle(() => ({ left: endX.value }));
+
+  return (
+    <View style={styles.row}>
+      <Pressable onPress={togglePlay} style={[styles.playBtn, { backgroundColor: theme.accent }]}>
+        <Text style={styles.playIcon}>{playing ? '❚❚' : '▶'}</Text>
+      </Pressable>
+      <View
+        style={[styles.track, { backgroundColor: theme.surface }]}
+        onLayout={(e) => setW(e.nativeEvent.layout.width)}>
+        <Animated.View
+          style={[
+            styles.selection,
+            { borderColor: theme.accent, backgroundColor: 'rgba(124,92,255,0.18)' },
+            selStyle,
+          ]}
+          pointerEvents="none"
+        />
+        <GestureDetector gesture={startPan}>
+          <Animated.View style={[styles.handle, { backgroundColor: theme.accent }, leftHandle]} />
+        </GestureDetector>
+        <GestureDetector gesture={endPan}>
+          <Animated.View style={[styles.handle, { backgroundColor: theme.accent }, rightHandle]} />
+        </GestureDetector>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },
+  playBtn: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playIcon: { color: '#fff', fontSize: 16 },
+  track: { flex: 1, height: TRACK_H, borderRadius: 8, justifyContent: 'center' },
+  selection: { position: 'absolute', top: 0, bottom: 0, borderWidth: 2, borderRadius: 8 },
+  handle: { position: 'absolute', top: 0, bottom: 0, width: HANDLE_W, borderRadius: 6 },
+});

package/src/components/audio/Slider.tsx

@@ -0,0 +1,60 @@
+import { useEffect, 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 { useTheme } from '../../theme';
+
+const THUMB = 18;
+
+export function Slider({ value, onChange }: { value: number; onChange: (v: number) => void }) {
+  const theme = useTheme();
+  const [w, setW] = useState(0);
+  const x = useSharedValue(0);
+  const start = useSharedValue(0);
+
+  useEffect(() => {
+    if (w > 0) x.value = Math.max(0, Math.min(1, value)) * w;
+  }, [value, w, x]);
+
+  const commit = (px: number) => {
+    if (w > 0) onChange(Math.max(0, Math.min(1, px / w)));
+  };
+
+  const pan = Gesture.Pan()
+    .onStart(() => {
+      start.value = x.value;
+    })
+    .onUpdate((e) => {
+      x.value = Math.max(0, Math.min(w, start.value + e.translationX));
+      runOnJS(commit)(x.value);
+    })
+    .onEnd(() => runOnJS(commit)(x.value));
+
+  const fill = useAnimatedStyle(() => ({ width: x.value }));
+  const thumb = useAnimatedStyle(() => ({ transform: [{ translateX: x.value - THUMB / 2 }] }));
+
+  return (
+    <GestureDetector gesture={pan}>
+      <View style={styles.track} onLayout={(e) => setW(e.nativeEvent.layout.width)}>
+        <View style={styles.bg} />
+        <Animated.View style={[styles.fill, { backgroundColor: theme.accent }, fill]} />
+        <Animated.View style={[styles.thumb, { backgroundColor: theme.accent }, thumb]} />
+      </View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: { height: THUMB + 12, justifyContent: 'center' },
+  bg: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+  },
+  fill: { position: 'absolute', left: 0, height: 4, borderRadius: 2 },
+  thumb: { width: THUMB, height: THUMB, borderRadius: THUMB / 2 },
+});

package/src/components/filters/FilterCarousel.tsx

@@ -0,0 +1,44 @@
+import { Pressable, ScrollView, StyleSheet, Text } from 'react-native';
+
+import { FILTER_PRESETS } from '../../filters/presets';
+import { useEditorStore } from '../../state/store';
+import { useTheme } from '../../theme';
+
+export function FilterCarousel() {
+  const filter = useEditorStore((s) => s.filter);
+  const setFilter = useEditorStore((s) => s.setFilter);
+  const theme = useTheme();
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.row}>
+      {FILTER_PRESETS.map((p) => {
+        const active = p.key === filter;
+        return (
+          <Pressable
+            key={p.key}
+            onPress={() => setFilter(p.key)}
+            style={[
+              styles.chip,
+              {
+                backgroundColor: theme.surface,
+                borderColor: active ? theme.accent : 'transparent',
+              },
+            ]}>
+            <Text style={[styles.label, { color: active ? theme.accent : theme.textMuted }]}>
+              {p.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { gap: 8, paddingHorizontal: 4, paddingVertical: 2 },
+  chip: { paddingHorizontal: 16, paddingVertical: 10, borderRadius: 16, borderWidth: 2 },
+  label: { fontSize: 13, fontWeight: '600' },
+});

package/src/components/giphy/GiphyGrid.tsx

@@ -0,0 +1,48 @@
+import { Image } from 'expo-image';
+import { FlatList, Pressable, StyleSheet } from 'react-native';
+
+import type { GiphyItem } from '../../services/giphyClient';
+
+const COLUMNS = 3;
+const GAP = 6;
+
+export function GiphyGrid({
+  items,
+  onPick,
+  onEndReached,
+}: {
+  items: GiphyItem[];
+  onPick: (item: GiphyItem) => void;
+  onEndReached: () => void;
+}) {
+  return (
+    <FlatList
+      data={items}
+      keyExtractor={(it, i) => `${it.id}-${i}`}
+      numColumns={COLUMNS}
+      contentContainerStyle={styles.content}
+      columnWrapperStyle={styles.row}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={0.6}
+      keyboardShouldPersistTaps="handled"
+      renderItem={({ item }) => (
+        <Pressable style={styles.cell} onPress={() => onPick(item)}>
+          <Image source={{ uri: item.previewUrl }} style={styles.img} contentFit="cover" />
+        </Pressable>
+      )}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  content: { padding: GAP, gap: GAP },
+  row: { gap: GAP },
+  cell: {
+    flex: 1 / COLUMNS,
+    aspectRatio: 1,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#222',
+  },
+  img: { width: '100%', height: '100%' },
+});

package/src/components/giphy/GiphyPicker.tsx

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+import { GiphyGrid } from './GiphyGrid';
+import { searchGifs, trendingGifs, type GiphyItem } from '../../services/giphyClient';
+import { useEditorStore } from '../../state/store';
+import { useTheme } from '../../theme';
+
+const PAGE = 24;
+
+export function GiphyPicker() {
+  const activePanel = useEditorStore((s) => s.activePanel);
+  const setActivePanel = useEditorStore((s) => s.setActivePanel);
+  const apiKey = useEditorStore((s) => s.giphyApiKey);
+  const addGifOverlay = useEditorStore((s) => s.addGifOverlay);
+  const theme = useTheme();
+
+  const [query, setQuery] = useState('');
+  const [items, setItems] = useState<GiphyItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const offsetRef = useRef(0);
+
+  const visible = activePanel === 'giphy' && !!apiKey;
+
+  const load = useCallback(
+    async (reset: boolean, q: string) => {
+      if (!apiKey) return;
+      setLoading(true);
+      try {
+        const offset = reset ? 0 : offsetRef.current;
+        const page = q
+          ? await searchGifs(apiKey, q, { offset, limit: PAGE })
+          : await trendingGifs(apiKey, { offset, limit: PAGE });
+        offsetRef.current = offset + PAGE;
+        setItems((prev) => (reset ? page : [...prev, ...page]));
+      } catch {
+        if (reset) setItems([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [apiKey]
+  );
+
+  useEffect(() => {
+    if (!visible) return;
+    const t = setTimeout(() => load(true, query.trim()), query ? 350 : 0);
+    return () => clearTimeout(t);
+  }, [visible, query, load]);
+
+  if (!visible) return null;
+  const close = () => setActivePanel('none');
+
+  return (
+    <Modal transparent visible animationType="slide" onRequestClose={close}>
+      <View style={[styles.sheet, { backgroundColor: theme.background }]}>
+        <View style={styles.header}>
+          <TextInput
+            value={query}
+            onChangeText={setQuery}
+            placeholder="Search GIPHY"
+            placeholderTextColor={theme.textMuted}
+            autoCorrect={false}
+            style={[styles.input, { backgroundColor: theme.surface, color: theme.text }]}
+          />
+          <Pressable onPress={close} hitSlop={12}>
+            <Text style={[styles.close, { color: theme.accent }]}>Close</Text>
+          </Pressable>
+        </View>
+
+        <GiphyGrid
+          items={items}
+          onPick={(item) => {
+            addGifOverlay({
+              previewUri: item.previewUrl,
+              exportUri: item.originalUrl,
+              aspectRatio: item.height > 0 ? item.width / item.height : 1,
+            });
+            close();
+          }}
+          onEndReached={() => !loading && load(false, query.trim())}
+        />
+
+        {loading ? <ActivityIndicator style={styles.loader} color={theme.accent} /> : null}
+        <Text style={[styles.attribution, { color: theme.textMuted }]}>Powered by GIPHY</Text>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  sheet: { flex: 1, paddingTop: 56 },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingBottom: 10,
+  },
+  input: { flex: 1, height: 40, borderRadius: 20, paddingHorizontal: 16, fontSize: 15 },
+  close: { fontSize: 15, fontWeight: '700' },
+  loader: { position: 'absolute', top: '50%', alignSelf: 'center' },
+  attribution: { textAlign: 'center', fontSize: 11, paddingVertical: 8, letterSpacing: 1 },
+});

package/src/components/overlays/GifOverlayView.tsx

@@ -0,0 +1,53 @@
+import { Image } from 'expo-image';
+import { StyleSheet, View } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+
+import { useOverlayGestures } from '../../hooks/useOverlayGestures';
+import { useEditorStore } from '../../state/store';
+import { useTheme } from '../../theme';
+import type { StickerOverlay } from '../../types';
+
+const BASE_WIDTH = 120;
+
+export function GifOverlayView({ overlay }: { overlay: StickerOverlay }) {
+  const { gesture, animatedStyle } = useOverlayGestures(overlay);
+  const updateOverlay = useEditorStore((s) => s.updateOverlay);
+  const selectOverlay = useEditorStore((s) => s.selectOverlay);
+  const selected = useEditorStore((s) => s.selectedOverlayId === overlay.id);
+  const theme = useTheme();
+
+  const width = BASE_WIDTH;
+  const height = BASE_WIDTH / (overlay.aspectRatio || 1);
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={[styles.wrapper, animatedStyle]}>
+        <View
+          collapsable={false}
+          onLayout={(e) => {
+            const { width: w, height: h } = e.nativeEvent.layout;
+            if (
+              Math.abs((overlay.baseWidth ?? 0) - w) > 0.5 ||
+              Math.abs((overlay.baseHeight ?? 0) - h) > 0.5
+            ) {
+              updateOverlay(overlay.id, { baseWidth: w, baseHeight: h });
+            }
+          }}
+          onTouchEnd={() => selectOverlay(overlay.id)}
+          style={[styles.content, selected && { borderColor: theme.accent }]}>
+          <Image
+            source={{ uri: overlay.previewUri }}
+            style={{ width, height }}
+            contentFit="contain"
+          />
+        </View>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: { position: 'absolute', top: 0, left: 0 },
+  content: { borderWidth: 1, borderColor: 'transparent', borderRadius: 6 },
+});

package/src/components/overlays/OverlayLayer.tsx

@@ -0,0 +1,24 @@
+import { StyleSheet, View } from 'react-native';
+
+import { GifOverlayView } from './GifOverlayView';
+import { TextOverlayView } from './TextOverlayView';
+import { useEditorStore } from '../../state/store';
+
+export function OverlayLayer() {
+  const overlays = useEditorStore((s) => s.overlays);
+  const activePanel = useEditorStore((s) => s.activePanel);
+  const selectedOverlayId = useEditorStore((s) => s.selectedOverlayId);
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      {overlays.map((o) => {
+        if (o.type === 'text' && activePanel === 'text' && o.id === selectedOverlayId) return null;
+        return o.type === 'text' ? (
+          <TextOverlayView key={o.id} overlay={o} />
+        ) : (
+          <GifOverlayView key={o.id} overlay={o} />
+        );
+      })}
+    </View>
+  );
+}

package/src/components/overlays/TextEditorSheet.tsx

@@ -0,0 +1,135 @@
+import { Modal, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useEditorStore } from '../../state/store';
+import { useTheme } from '../../theme';
+
+const COLORS = [
+  '#ffffff',
+  '#000000',
+  '#ff5c7c',
+  '#7c5cff',
+  '#4cd964',
+  '#ffd60a',
+  '#5ac8fa',
+  '#ff9f0a',
+];
+const ALIGNS = ['left', 'center', 'right'] as const;
+const ALIGN_LABELS: Record<(typeof ALIGNS)[number], string> = {
+  left: 'Esquerda',
+  center: 'Centro',
+  right: 'Direita',
+};
+
+export function TextEditorSheet() {
+  const activePanel = useEditorStore((s) => s.activePanel);
+  const setActivePanel = useEditorStore((s) => s.setActivePanel);
+  const overlay = useEditorStore((s) => s.overlays.find((o) => o.id === s.selectedOverlayId));
+  const updateOverlay = useEditorStore((s) => s.updateOverlay);
+  const removeOverlay = useEditorStore((s) => s.removeOverlay);
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+
+  if (activePanel !== 'text' || !overlay || overlay.type !== 'text') return null;
+  const close = () => setActivePanel('none');
+  const cycleAlign = () => {
+    const next = ALIGNS[(ALIGNS.indexOf(overlay.align) + 1) % ALIGNS.length];
+    updateOverlay(overlay.id, { align: next });
+  };
+  const toggleBg = () =>
+    updateOverlay(overlay.id, {
+      backgroundColor: overlay.backgroundColor ? undefined : 'rgba(0,0,0,0.5)',
+    });
+
+  return (
+    <Modal transparent visible animationType="fade" onRequestClose={close}>
+      <View style={styles.backdrop}>
+        <View style={styles.topbar}>
+          <Pressable
+            hitSlop={12}
+            onPress={() => {
+              removeOverlay(overlay.id);
+              close();
+            }}>
+            <Text style={[styles.action, { color: theme.danger }]}>Excluir</Text>
+          </Pressable>
+          <Pressable hitSlop={12} onPress={close}>
+            <Text style={[styles.action, { color: theme.accent }]}>Concluir</Text>
+          </Pressable>
+        </View>
+
+        <View style={styles.center}>
+          <TextInput
+            autoFocus
+            multiline
+            value={overlay.text}
+            onChangeText={(t) => updateOverlay(overlay.id, { text: t })}
+            placeholder="Digite…"
+            placeholderTextColor="rgba(255,255,255,0.4)"
+            style={[styles.input, { color: overlay.color, textAlign: overlay.align }]}
+          />
+        </View>
+
+        <View style={[styles.tools, { paddingBottom: insets.bottom + 40 }]}>
+          <Pressable style={styles.toolChip} onPress={cycleAlign}>
+            <Text style={styles.toolChipText}>{ALIGN_LABELS[overlay.align]}</Text>
+          </Pressable>
+          <Pressable
+            style={[
+              styles.toolChip,
+              overlay.backgroundColor ? { backgroundColor: theme.accent } : null,
+            ]}
+            onPress={toggleBg}>
+            <Text style={styles.toolChipText}>Fundo</Text>
+          </Pressable>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.swatches}>
+            {COLORS.map((c) => (
+              <Pressable
+                key={c}
+                onPress={() => updateOverlay(overlay.id, { color: c })}
+                style={[
+                  styles.swatch,
+                  {
+                    backgroundColor: c,
+                    borderColor: overlay.color === c ? theme.accent : 'rgba(255,255,255,0.3)',
+                  },
+                ]}
+              />
+            ))}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.85)' },
+  topbar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingTop: 60,
+  },
+  action: { fontSize: 16, fontWeight: '700' },
+  center: { flex: 1, justifyContent: 'center', paddingHorizontal: 24 },
+  input: { fontSize: 32, fontWeight: '700', minHeight: 60 },
+  tools: {
+    paddingHorizontal: 16,
+    gap: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  toolChip: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 14,
+    backgroundColor: 'rgba(255,255,255,0.15)',
+  },
+  toolChipText: { color: '#fff', fontWeight: '600', fontSize: 13, textTransform: 'capitalize' },
+  swatches: { gap: 10, alignItems: 'center', paddingRight: 12 },
+  swatch: { width: 28, height: 28, borderRadius: 14, borderWidth: 2 },
+});