@umituz/react-native-video-editor 1.0.1

package/src/presentation/components/EditorToolPanel.tsx

@@ -0,0 +1,180 @@
+/**
+ * Editor Tool Panel Component
+ * Single Responsibility: Display editor tool buttons
+ */
+
+import React from "react";
+import {
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+} from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { Audio } from "@domains/video";
+
+export interface EditorToolPanelProps {
+  onAddText: () => void;
+  onAddImage: () => void;
+  onAddShape: () => void;
+  onAudio: () => void;
+  hasAudio: boolean;
+}
+
+export const EditorToolPanel: React.FC<EditorToolPanelProps> = ({
+  onAddText,
+  onAddImage,
+  onAddShape,
+  onAudio,
+  hasAudio,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[styles.toolPanel, { backgroundColor: tokens.colors.surface }]}
+    >
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 12,
+        }}
+      >
+        {t("editor.tools.title")}
+      </AtomicText>
+
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <TouchableOpacity
+          style={[
+            styles.toolButton,
+            { backgroundColor: tokens.colors.backgroundPrimary },
+          ]}
+          onPress={onAddText}
+        >
+          <AtomicIcon name="Type" size="md" color="primary" />
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
+          >
+            {t("editor.tools.text")}
+          </AtomicText>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[
+            styles.toolButton,
+            { backgroundColor: tokens.colors.backgroundPrimary },
+          ]}
+          onPress={onAddImage}
+        >
+          <AtomicIcon name="image-outline" size="md" color="primary" />
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
+          >
+            {t("editor.tools.image")}
+          </AtomicText>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[
+            styles.toolButton,
+            { backgroundColor: tokens.colors.backgroundPrimary },
+          ]}
+          onPress={onAddShape}
+        >
+          <AtomicIcon name="Square" size="md" color="primary" />
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
+          >
+            {t("editor.tools.shape")}
+          </AtomicText>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[
+            styles.toolButton,
+            { backgroundColor: tokens.colors.backgroundPrimary },
+          ]}
+          onPress={onAudio}
+        >
+          <AtomicIcon name="Music" size="md" color="primary" />
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
+          >
+            {t("editor.tools.audio")}
+          </AtomicText>
+          {hasAudio && (
+            <View
+              style={[
+                styles.audioBadge,
+                {
+                  backgroundColor: tokens.colors.success,
+                  borderColor: tokens.colors.surface,
+                },
+              ]}
+            />
+          )}
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[
+            styles.toolButton,
+            { backgroundColor: tokens.colors.backgroundPrimary },
+          ]}
+          onPress={() =>
+            Alert.alert(
+              t("editor.tools.effects", "Effects"),
+              t("editor.tools.effectsComingSoon", "Coming soon!"),
+            )
+          }
+        >
+          <AtomicIcon name="sparkles-outline" size="md" color="primary" />
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
+          >
+            {t("editor.tools.effects")}
+          </AtomicText>
+        </TouchableOpacity>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  toolPanel: {
+    padding: 16,
+    marginHorizontal: 16,
+    marginBottom: 16,
+    borderRadius: 12,
+  },
+  toolButton: {
+    width: 80,
+    height: 80,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  audioBadge: {
+    position: "absolute",
+    top: 8,
+    right: 8,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    borderWidth: 2,
+  },
+});

package/src/presentation/components/ExportDialog.tsx

@@ -0,0 +1,135 @@
+/**
+ * ExportDialog Component
+ * Main component for video export dialog
+ */
+
+import React, { useCallback } from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { ExportSettings, VideoProject } from "@domains/video";
+import { useExportForm } from "../../hooks/useExportForm";
+import { useExport } from "../../hooks/useExport";
+import {
+  RESOLUTIONS,
+  QUALITIES,
+  FORMATS,
+} from "../../constants/export.constants";
+import {
+  ProjectInfoBox,
+  OptionSelectorRow,
+  WatermarkToggle,
+  ExportProgress,
+  ExportInfoBanner,
+  ExportActions,
+} from "./export";
+
+interface ExportDialogProps {
+  project: VideoProject;
+  onExport: (settings: ExportSettings, uri?: string) => void;
+  onCancel: () => void;
+}
+
+export const ExportDialog: React.FC<ExportDialogProps> = ({
+  project,
+  onExport,
+  onCancel,
+}) => {
+  const { t } = useLocalization();
+  const {
+    formState,
+    setResolution,
+    setQuality,
+    setFormat,
+    setIncludeWatermark,
+    buildExportSettings,
+    estimatedSize,
+    projectDuration,
+  } = useExportForm(project);
+
+  const { isExporting, exportProgress, exportVideo, resetExport } = useExport();
+
+  const handleExport = useCallback(async () => {
+    const settings = buildExportSettings();
+    const result = await exportVideo(project, settings);
+
+    if (result.success) {
+      onExport(settings, result.uri);
+    } else {
+      resetExport();
+    }
+  }, [project, buildExportSettings, exportVideo, onExport, resetExport]);
+
+  const resolutionOptions = RESOLUTIONS.map((res) => ({
+    value: res,
+    label: res,
+    textTransform: "none" as const,
+  }));
+
+  const qualityOptions = QUALITIES.map((qual) => ({
+    value: qual,
+    label: qual,
+    textTransform: "capitalize" as const,
+  }));
+
+  const formatOptions = FORMATS.map((fmt) => ({
+    value: fmt,
+    label: fmt,
+    textTransform: "uppercase" as const,
+  }));
+
+  return (
+    <View style={styles.container}>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <ProjectInfoBox
+          project={project}
+          duration={projectDuration}
+          estimatedSize={estimatedSize}
+        />
+
+        <OptionSelectorRow
+          title={t("editor.export.resolution")}
+          options={resolutionOptions}
+          selectedValue={formState.resolution}
+          onValueChange={setResolution}
+        />
+
+        <OptionSelectorRow
+          title={t("editor.export.quality")}
+          options={qualityOptions}
+          selectedValue={formState.quality}
+          onValueChange={setQuality}
+        />
+
+        <OptionSelectorRow
+          title={t("editor.export.format")}
+          options={formatOptions}
+          selectedValue={formState.format}
+          onValueChange={setFormat}
+        />
+
+        <WatermarkToggle
+          includeWatermark={formState.includeWatermark}
+          onToggle={setIncludeWatermark}
+        />
+
+        {isExporting && exportProgress && (
+          <ExportProgress progress={exportProgress} />
+        )}
+
+        {!isExporting && <ExportInfoBanner />}
+      </ScrollView>
+
+      <ExportActions
+        isExporting={isExporting}
+        onCancel={onCancel}
+        onExport={handleExport}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 16,
+  },
+});

package/src/presentation/components/ImageLayerEditor.tsx

@@ -0,0 +1,95 @@
+/**
+ * ImageLayerEditor Component
+ * Main component for editing image layers
+ */
+
+import React, { useCallback } from "react";
+import { View, ScrollView, StyleSheet, Alert } from "react-native";
+import { useImagePicker } from "@/domains/media";
+import type { ImageLayer } from "@domains/video";
+import { useImageLayerForm } from "../../hooks/useImageLayerForm";
+import { IMAGE_PICKER_OPTIONS } from "../../constants/image-layer.constants";
+import {
+  ImagePreview,
+  ImageSelectionButtons,
+  OpacitySelector,
+} from "./image-layer";
+import { EditorActions } from "./text-layer/EditorActions";
+
+interface ImageLayerEditorProps {
+  layer?: ImageLayer;
+  onSave: (layerData: Partial<ImageLayer>) => void;
+  onCancel: () => void;
+}
+
+export const ImageLayerEditor: React.FC<ImageLayerEditorProps> = ({
+  layer,
+  onSave,
+  onCancel,
+}) => {
+  const { pickFromLibrary, pickFromCamera } = useImagePicker();
+  const { formState, setImageUri, setOpacity, buildLayerData, isValid } =
+    useImageLayerForm(layer);
+
+  const handlePickImage = useCallback(async () => {
+    const result = await pickFromLibrary(IMAGE_PICKER_OPTIONS);
+
+    if (!result.canceled && result.assets?.[0]) {
+      setImageUri(result.assets[0].uri);
+    }
+  }, [pickFromLibrary, setImageUri]);
+
+  const handleTakePhoto = useCallback(async () => {
+    const result = await pickFromCamera(IMAGE_PICKER_OPTIONS);
+
+    if (!result.canceled && result.assets?.[0]) {
+      setImageUri(result.assets[0].uri);
+    }
+  }, [pickFromCamera, setImageUri]);
+
+  const handleSave = useCallback(() => {
+    if (!isValid) {
+      Alert.alert("No Image", "Please select an image first.");
+      return;
+    }
+    onSave(buildLayerData());
+  }, [isValid, buildLayerData, onSave]);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={{ marginBottom: 24 }}>
+          <ImagePreview
+            imageUri={formState.imageUri}
+            opacity={formState.opacity}
+          />
+        </View>
+
+        <ImageSelectionButtons
+          onPickFromGallery={handlePickImage}
+          onTakePhoto={handleTakePhoto}
+        />
+
+        {formState.imageUri && (
+          <OpacitySelector
+            opacity={formState.opacity}
+            onOpacityChange={setOpacity}
+          />
+        )}
+      </ScrollView>
+
+      <EditorActions
+        onCancel={onCancel}
+        onSave={handleSave}
+        saveLabel={layer ? "Update Image" : "Add Image"}
+        isValid={isValid}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 16,
+  },
+});

package/src/presentation/components/LayerActionsMenu.tsx

@@ -0,0 +1,197 @@
+/**
+ * Layer Actions Menu Component
+ * Single Responsibility: Display layer action menu
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { Layer, ImageLayer } from "@domains/video";
+
+export interface LayerActionsMenuProps {
+  layer: Layer;
+  onEditText: () => void;
+  onEditImage: () => void;
+  onAnimate: () => void;
+  onDuplicate: () => void;
+  onMoveFront: () => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  onMoveBack: () => void;
+  onDelete: () => void;
+}
+
+export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
+  layer,
+  onEditText,
+  onEditImage,
+  onAnimate,
+  onDuplicate,
+  onMoveFront,
+  onMoveUp,
+  onMoveDown,
+  onMoveBack,
+  onDelete,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={{ paddingVertical: 8 }}>
+      {layer.type === "text" && (
+        <TouchableOpacity style={styles.actionMenuItem} onPress={onEditText}>
+          <AtomicIcon name="Edit" size="md" color="primary" />
+          <AtomicText
+            type="bodyMedium"
+            style={{
+              color: tokens.colors.textPrimary,
+              marginLeft: 12,
+            }}
+          >
+            Edit Text
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+      {layer.type === "image" && (
+        <TouchableOpacity style={styles.actionMenuItem} onPress={onEditImage}>
+          <AtomicIcon name="Edit" size="md" color="primary" />
+          <AtomicText
+            type="bodyMedium"
+            style={{
+              color: tokens.colors.textPrimary,
+              marginLeft: 12,
+            }}
+          >
+            Edit Image
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+
+      <TouchableOpacity style={styles.actionMenuItem} onPress={onAnimate}>
+        <AtomicIcon name="sparkles-outline" size="md" color="primary" />
+        <AtomicText
+          type="bodyMedium"
+          style={{
+            color: tokens.colors.textPrimary,
+            marginLeft: 12,
+          }}
+        >
+          {layer.animation ? "Edit Animation" : "Add Animation"}
+        </AtomicText>
+        {layer.animation && (
+          <View
+            style={[
+              styles.animationBadge,
+              { backgroundColor: tokens.colors.success },
+            ]}
+          />
+        )}
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.actionMenuItem} onPress={onDuplicate}>
+        <AtomicIcon name="copy" size="md" color="primary" />
+        <AtomicText
+          type="bodyMedium"
+          style={{
+            color: tokens.colors.textPrimary,
+            marginLeft: 12,
+          }}
+        >
+          Duplicate Layer
+        </AtomicText>
+      </TouchableOpacity>
+
+      <View style={styles.divider} />
+
+      <TouchableOpacity style={styles.actionMenuItem} onPress={onMoveFront}>
+        <AtomicIcon name="ChevronsUp" size="md" color="secondary" />
+        <AtomicText
+          type="bodyMedium"
+          style={{
+            color: tokens.colors.textSecondary,
+            marginLeft: 12,
+          }}
+        >
+          Bring to Front
+        </AtomicText>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.actionMenuItem} onPress={onMoveUp}>
+        <AtomicIcon name="ChevronUp" size="md" color="secondary" />
+        <AtomicText
+          type="bodyMedium"
+          style={{
+            color: tokens.colors.textSecondary,
+            marginLeft: 12,
+          }}
+        >
+          Move Up
+        </AtomicText>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.actionMenuItem} onPress={onMoveDown}>
+        <AtomicIcon name="chevron-down" size="md" color="secondary" />
+        <AtomicText
+          type="bodyMedium"
+          style={{
+            color: tokens.colors.textSecondary,
+            marginLeft: 12,
+          }}
+        >
+          Move Down
+        </AtomicText>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.actionMenuItem} onPress={onMoveBack}>
+        <AtomicIcon name="ChevronsDown" size="md" color="secondary" />
+        <AtomicText
+          type="bodyMedium"
+          style={{
+            color: tokens.colors.textSecondary,
+            marginLeft: 12,
+          }}
+        >
+          Send to Back
+        </AtomicText>
+      </TouchableOpacity>
+
+      <View style={styles.divider} />
+
+      <TouchableOpacity style={styles.actionMenuItem} onPress={onDelete}>
+        <AtomicIcon name="trash-outline" size="md" color="error" />
+        <AtomicText
+          type="bodyMedium"
+          style={{
+            color: tokens.colors.error,
+            marginLeft: 12,
+          }}
+        >
+          Delete Layer
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  actionMenuItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: "#E5E7EB",
+    marginVertical: 8,
+  },
+  animationBadge: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginLeft: 8,
+  },
+});

package/src/presentation/components/SceneActionsMenu.tsx

@@ -0,0 +1,69 @@
+/**
+ * Scene Actions Menu Component
+ * Single Responsibility: Display scene action menu
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface SceneActionsMenuProps {
+  sceneIndex: number;
+  canDelete: boolean;
+  onDuplicate: () => void;
+  onDelete: () => void;
+}
+
+export const SceneActionsMenu: React.FC<SceneActionsMenuProps> = ({
+  sceneIndex,
+  canDelete,
+  onDuplicate,
+  onDelete,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={{ paddingVertical: 8 }}>
+      <TouchableOpacity style={styles.actionMenuItem} onPress={onDuplicate}>
+        <AtomicIcon name="copy" size="md" color="primary" />
+        <AtomicText
+          type="bodyMedium"
+          style={{
+            color: tokens.colors.textPrimary,
+            marginLeft: 12,
+          }}
+        >
+          Duplicate Scene
+        </AtomicText>
+      </TouchableOpacity>
+
+      {canDelete && (
+        <TouchableOpacity style={styles.actionMenuItem} onPress={onDelete}>
+          <AtomicIcon name="trash-outline" size="md" color="error" />
+          <AtomicText
+            type="bodyMedium"
+            style={{
+              color: tokens.colors.error,
+              marginLeft: 12,
+            }}
+          >
+            Delete Scene
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  actionMenuItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+});