@umituz/react-native-video-editor 1.0.1

package/src/presentation/components/AudioEditor.tsx

@@ -0,0 +1,144 @@
+/**
+ * AudioEditor Component
+ * Main component for editing audio layers
+ */
+
+import React, { useCallback } from "react";
+import { View, ScrollView, StyleSheet, Alert } from "react-native";
+import * as DocumentPicker from "expo-document-picker";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { Audio } from "@domains/video";
+import { useAudioLayerForm } from "../../hooks/useAudioLayerForm";
+import { AUDIO_FILE_TYPES } from "../../constants/audio-layer.constants";
+import {
+  AudioFileSelector,
+  VolumeSelector,
+  FadeEffectsSelector,
+  InfoBanner,
+  AudioEditorActions,
+} from "./audio-layer";
+
+interface AudioEditorProps {
+  audio?: Audio;
+  onSave: (audioData: Audio) => void;
+  onRemove?: () => void;
+  onCancel: () => void;
+}
+
+export const AudioEditor: React.FC<AudioEditorProps> = ({
+  audio,
+  onSave,
+  onRemove,
+  onCancel,
+}) => {
+  const tokens = useAppDesignTokens();
+  const {
+    formState,
+    setAudioUri,
+    setVolume,
+    setFadeIn,
+    setFadeOut,
+    buildAudioData,
+    isValid,
+  } = useAudioLayerForm(audio);
+
+  const handlePickAudio = useCallback(async () => {
+    try {
+      const result = await DocumentPicker.getDocumentAsync({
+        type: AUDIO_FILE_TYPES[0],
+        copyToCacheDirectory: true,
+      });
+
+      if (!result.canceled && result.assets && result.assets.length > 0) {
+        setAudioUri(result.assets[0].uri);
+      }
+    } catch (error) {
+      Alert.alert("Error", "Failed to pick audio file");
+    }
+  }, [setAudioUri]);
+
+  const handleSave = useCallback(() => {
+    if (!isValid) {
+      Alert.alert("Error", "Please select an audio file");
+      return;
+    }
+    onSave(buildAudioData());
+  }, [isValid, buildAudioData, onSave]);
+
+  const handleRemoveAudio = useCallback(() => {
+    Alert.alert(
+      "Remove Audio",
+      "Are you sure you want to remove the audio from this scene?",
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Remove",
+          style: "destructive",
+          onPress: () => {
+            onRemove?.();
+          },
+        },
+      ],
+    );
+  }, [onRemove]);
+
+  const getFileName = useCallback((uri: string) => {
+    const parts = uri.split("/");
+    return parts[parts.length - 1] || "Unknown";
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={styles.section}>
+          <AtomicText
+            type="bodyMedium"
+            style={{
+              color: tokens.colors.textPrimary,
+              fontWeight: "600",
+              marginBottom: 8,
+            }}
+          >
+            Audio File
+          </AtomicText>
+          <AudioFileSelector
+            audioUri={formState.audioUri}
+            onPickAudio={handlePickAudio}
+            getFileName={getFileName}
+          />
+        </View>
+
+        <VolumeSelector volume={formState.volume} onVolumeChange={setVolume} />
+
+        <FadeEffectsSelector
+          fadeIn={formState.fadeIn}
+          fadeOut={formState.fadeOut}
+          onFadeInChange={setFadeIn}
+          onFadeOutChange={setFadeOut}
+        />
+
+        <InfoBanner />
+      </ScrollView>
+
+      <AudioEditorActions
+        hasAudio={!!audio}
+        onRemove={handleRemoveAudio}
+        onCancel={onCancel}
+        onSave={handleSave}
+        isValid={isValid}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 16,
+  },
+  section: {
+    marginBottom: 24,
+  },
+});

package/src/presentation/components/DraggableLayer.tsx

@@ -0,0 +1,110 @@
+/**
+ * DraggableLayer Component
+ * Draggable and resizable layer component
+ */
+
+import React from "react";
+import { StyleSheet } from "react-native";
+import { GestureDetector } from "react-native-gesture-handler";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { Layer } from "@domains/video";
+import { useDraggableLayerGestures } from "../../hooks/useDraggableLayerGestures";
+import { LayerContent } from "./draggable-layer/LayerContent";
+import { ResizeHandles } from "./draggable-layer/ResizeHandles";
+
+interface DraggableLayerProps {
+  layer: Layer;
+  canvasWidth: number;
+  canvasHeight: number;
+  isSelected: boolean;
+  onSelect: () => void;
+  onPositionChange: (x: number, y: number) => void;
+  onSizeChange: (width: number, height: number) => void;
+}
+
+export const DraggableLayer: React.FC<DraggableLayerProps> = ({
+  layer,
+  canvasWidth,
+  canvasHeight,
+  isSelected,
+  onSelect,
+  onPositionChange,
+  onSizeChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const initialX = (layer.position.x / 100) * canvasWidth;
+  const initialY = (layer.position.y / 100) * canvasHeight;
+  const initialWidth = (layer.size.width / 100) * canvasWidth;
+  const initialHeight = (layer.size.height / 100) * canvasHeight;
+
+  const {
+    translateX,
+    translateY,
+    width,
+    height,
+    composedGesture,
+    topLeftResizeHandler,
+    topRightResizeHandler,
+    bottomLeftResizeHandler,
+    bottomRightResizeHandler,
+  } = useDraggableLayerGestures({
+    initialX,
+    initialY,
+    initialWidth,
+    initialHeight,
+    canvasWidth,
+    canvasHeight,
+    onSelect,
+    onPositionChange,
+    onSizeChange,
+  });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+      { rotate: `${layer.rotation}deg` },
+    ],
+    opacity: layer.opacity,
+    width: width.value,
+    height: height.value,
+  }));
+
+  return (
+    <GestureDetector gesture={composedGesture}>
+      <Animated.View
+        style={[
+          styles.layer,
+          {
+            borderColor: isSelected ? tokens.colors.primary : "transparent",
+            borderWidth: isSelected ? 2 : 0,
+          },
+          animatedStyle,
+        ]}
+      >
+        <LayerContent layer={layer} />
+
+        {isSelected && (
+          <ResizeHandles
+            topLeftGesture={topLeftResizeHandler}
+            topRightGesture={topRightResizeHandler}
+            bottomLeftGesture={bottomLeftResizeHandler}
+            bottomRightGesture={bottomRightResizeHandler}
+          />
+        )}
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+const styles = StyleSheet.create({
+  layer: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+    borderStyle: "dashed",
+    overflow: "hidden",
+  },
+});

package/src/presentation/components/EditorHeader.tsx

@@ -0,0 +1,107 @@
+/**
+ * Editor Header Component
+ * Single Responsibility: Display editor header with actions
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { AppNavigation } from "@umituz/react-native-design-system";
+
+export interface EditorHeaderProps {
+  projectTitle: string;
+  canUndo: boolean;
+  canRedo: boolean;
+  onUndo: () => void;
+  onRedo: () => void;
+  onSave: () => void;
+  onExport: () => void;
+  onBack: () => void;
+}
+
+export const EditorHeader: React.FC<EditorHeaderProps> = ({
+  projectTitle,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  onSave,
+  onExport,
+  onBack,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[
+        styles.header,
+        {
+          backgroundColor: tokens.colors.surface,
+          borderBottomColor: tokens.colors.borderLight,
+        },
+      ]}
+    >
+      <TouchableOpacity onPress={onBack} style={styles.backButton}>
+        <AtomicIcon name="chevron-back" size="md" color="primary" />
+      </TouchableOpacity>
+
+      <AtomicText
+        type="bodyLarge"
+        style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+      >
+        {projectTitle}
+      </AtomicText>
+
+      <View style={styles.headerActions}>
+        <TouchableOpacity
+          onPress={onUndo}
+          style={styles.headerButton}
+          disabled={!canUndo}
+        >
+          <AtomicIcon name="arrow-undo" size="md" color="secondary" />
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={onRedo}
+          style={styles.headerButton}
+          disabled={!canRedo}
+        >
+          <AtomicIcon name="arrow-redo" size="md" color="secondary" />
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={onSave} style={styles.headerButton}>
+          <AtomicIcon name="save" size="md" color="secondary" />
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={onExport} style={styles.headerButton}>
+          <AtomicIcon name="download" size="md" color="primary" />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+  },
+  backButton: {
+    padding: 8,
+  },
+  headerActions: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  headerButton: {
+    padding: 8,
+  },
+});

package/src/presentation/components/EditorPreviewArea.tsx

@@ -0,0 +1,221 @@
+/**
+ * Editor Preview Area Component
+ * Single Responsibility: Display video preview canvas and playback controls
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet, Dimensions } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { DraggableLayer } from "./DraggableLayer";
+import type { Scene, Layer, ImageLayer } from "@domains/video";
+
+const { width } = Dimensions.get("window");
+const PREVIEW_ASPECT_RATIO = 16 / 9;
+const PREVIEW_HEIGHT = width / PREVIEW_ASPECT_RATIO;
+
+export interface EditorPreviewAreaProps {
+  scene: Scene;
+  selectedLayerId: string | null;
+  isPlaying: boolean;
+  currentTime: number;
+  onLayerSelect: (layerId: string) => void;
+  onLayerPositionChange: (layerId: string, x: number, y: number) => void;
+  onLayerSizeChange: (layerId: string, width: number, height: number) => void;
+  onLayerActionsPress: (layer: Layer) => void;
+  onPlayPause: () => void;
+  onReset: () => void;
+}
+
+export const EditorPreviewArea: React.FC<EditorPreviewAreaProps> = ({
+  scene,
+  selectedLayerId,
+  isPlaying,
+  currentTime,
+  onLayerSelect,
+  onLayerPositionChange,
+  onLayerSizeChange,
+  onLayerActionsPress,
+  onPlayPause,
+  onReset,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.previewSection}>
+      <View
+        style={[
+          styles.previewCanvas,
+          {
+            backgroundColor:
+              scene.background.type === "color"
+                ? scene.background.value
+                : tokens.colors.surfaceSecondary,
+            height: PREVIEW_HEIGHT,
+          },
+        ]}
+      >
+        {scene.layers.length === 0 ? (
+          <View style={styles.emptyPreview}>
+            <AtomicIcon name="film-outline" size="xl" color="secondary" />
+            <AtomicText
+              type="bodyMedium"
+              style={{ color: tokens.colors.textSecondary, marginTop: 12 }}
+            >
+              Canvas is empty. Add layers to get started.
+            </AtomicText>
+          </View>
+        ) : (
+          <>
+            {scene.layers.map((layer) => (
+              <DraggableLayer
+                key={layer.id}
+                layer={layer}
+                canvasWidth={width}
+                canvasHeight={PREVIEW_HEIGHT}
+                isSelected={selectedLayerId === layer.id}
+                onSelect={() => onLayerSelect(layer.id)}
+                onPositionChange={(x, y) =>
+                  onLayerPositionChange(layer.id, x, y)
+                }
+                onSizeChange={(w, h) => onLayerSizeChange(layer.id, w, h)}
+              />
+            ))}
+
+            {selectedLayerId && (
+              <TouchableOpacity
+                style={[
+                  styles.layerActionsButton,
+                  { backgroundColor: tokens.colors.primary },
+                ]}
+                onPress={() => {
+                  const layer = scene.layers.find(
+                    (l) => l.id === selectedLayerId,
+                  );
+                  if (layer) {
+                    onLayerActionsPress(layer);
+                  }
+                }}
+              >
+                <AtomicIcon
+                  name="ellipsis-vertical"
+                  size="md"
+                  color="onSurface"
+                />
+              </TouchableOpacity>
+            )}
+          </>
+        )}
+      </View>
+
+      <View
+        style={[
+          styles.playbackControls,
+          { backgroundColor: tokens.colors.surface },
+        ]}
+      >
+        <View style={styles.playbackRow}>
+          <TouchableOpacity onPress={onPlayPause} style={styles.playButton}>
+            <AtomicIcon
+              name={isPlaying ? "pause" : "play"}
+              size="lg"
+              color="primary"
+            />
+          </TouchableOpacity>
+
+          <View style={styles.timeDisplay}>
+            <AtomicText
+              type="labelSmall"
+              style={{ color: tokens.colors.textSecondary }}
+            >
+              {Math.floor(currentTime / 1000)}s /{" "}
+              {Math.floor(scene.duration / 1000)}s
+            </AtomicText>
+          </View>
+
+          <TouchableOpacity onPress={onReset} style={styles.resetButton}>
+            <AtomicIcon name="refresh" size="md" color="secondary" />
+          </TouchableOpacity>
+        </View>
+
+        <View
+          style={[
+            styles.progressBarContainer,
+            { backgroundColor: tokens.colors.borderLight },
+          ]}
+        >
+          <View
+            style={[
+              styles.progressBar,
+              {
+                width: `${(currentTime / scene.duration) * 100}%`,
+                backgroundColor: tokens.colors.primary,
+              },
+            ]}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  previewSection: {
+    padding: 16,
+  },
+  previewCanvas: {
+    width: "100%",
+    borderRadius: 12,
+    overflow: "hidden",
+    position: "relative",
+  },
+  emptyPreview: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 60,
+  },
+  playbackControls: {
+    marginTop: 16,
+    padding: 16,
+    borderRadius: 12,
+  },
+  playbackRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  progressBarContainer: {
+    height: 4,
+    borderRadius: 2,
+    marginTop: 12,
+    overflow: "hidden",
+  },
+  progressBar: {
+    height: "100%",
+    borderRadius: 2,
+  },
+  playButton: {
+    padding: 8,
+  },
+  timeDisplay: {
+    flex: 1,
+    alignItems: "center",
+  },
+  resetButton: {
+    padding: 8,
+  },
+  layerActionsButton: {
+    position: "absolute",
+    top: 16,
+    right: 16,
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/EditorTimeline.tsx

@@ -0,0 +1,136 @@
+/**
+ * Editor Timeline Component
+ * Single Responsibility: Display scene timeline
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { VideoProject, Scene } from "@domains/video";
+
+export interface EditorTimelineProps {
+  project: VideoProject;
+  currentSceneIndex: number;
+  onSceneSelect: (index: number) => void;
+  onSceneLongPress: (index: number) => void;
+  onAddScene: () => void;
+}
+
+export const EditorTimeline: React.FC<EditorTimelineProps> = ({
+  project,
+  currentSceneIndex,
+  onSceneSelect,
+  onSceneLongPress,
+  onAddScene,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={[styles.timeline, { backgroundColor: tokens.colors.surface }]}>
+      <View style={styles.timelineHeader}>
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+        >
+          {t("editor.timeline.title")}
+        </AtomicText>
+        <TouchableOpacity onPress={onAddScene}>
+          <AtomicIcon name="add" size="md" color="primary" />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={styles.scenesScroll}
+      >
+        {project.scenes.map((scene: Scene, index: number) => (
+          <TouchableOpacity
+            key={scene.id}
+            style={[
+              styles.sceneCard,
+              {
+                backgroundColor:
+                  currentSceneIndex === index
+                    ? tokens.colors.primary + "20"
+                    : tokens.colors.backgroundPrimary,
+                borderColor:
+                  currentSceneIndex === index
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onSceneSelect(index)}
+            onLongPress={() => onSceneLongPress(index)}
+          >
+            <View
+              style={[
+                styles.sceneThumbnail,
+                {
+                  backgroundColor:
+                    scene.background.value || tokens.colors.surfaceSecondary,
+                },
+              ]}
+            >
+              <AtomicText
+                type="labelSmall"
+                style={{ color: "#FFFFFF", fontWeight: "600" }}
+              >
+                {index + 1}
+              </AtomicText>
+            </View>
+            <AtomicText
+              type="labelSmall"
+              style={{
+                color: tokens.colors.textPrimary,
+                marginTop: 4,
+                fontWeight: currentSceneIndex === index ? "600" : "400",
+              }}
+            >
+              {scene.duration / 1000}s
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  timeline: {
+    padding: 16,
+    marginHorizontal: 16,
+    marginBottom: 24,
+    borderRadius: 12,
+  },
+  timelineHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 12,
+  },
+  scenesScroll: {
+    marginHorizontal: -16,
+    paddingHorizontal: 16,
+  },
+  sceneCard: {
+    padding: 8,
+    borderRadius: 8,
+    borderWidth: 2,
+    marginRight: 12,
+    alignItems: "center",
+  },
+  sceneThumbnail: {
+    width: 60,
+    height: 60,
+    borderRadius: 6,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});