@umituz/react-native-video-editor 1.0.1

package/src/presentation/components/export/ExportProgress.tsx

@@ -0,0 +1,114 @@
+/**
+ * ExportProgress Component
+ * Export progress display for export dialog
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { ExportProgress as ExportProgressType } from "@domains/video/infrastructure/services/video-export.service";
+
+interface ExportProgressProps {
+  progress: ExportProgressType;
+}
+
+export const ExportProgress: React.FC<ExportProgressProps> = ({ progress }) => {
+  const tokens = useAppDesignTokens();
+
+  const getStatusText = () => {
+    switch (progress.status) {
+      case "preparing":
+        return "Preparing Export...";
+      case "encoding":
+        return "Encoding Video...";
+      case "saving":
+        return "Saving Video...";
+      case "complete":
+        return "Export Complete!";
+      case "error":
+        return "Export Failed";
+      default:
+        return "Processing...";
+    }
+  };
+
+  return (
+    <View
+      style={[
+        styles.progressContainer,
+        { backgroundColor: tokens.colors.surface },
+      ]}
+    >
+      <View style={styles.progressHeader}>
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+        >
+          {getStatusText()}
+        </AtomicText>
+        <AtomicText
+          type="labelSmall"
+          style={{ color: tokens.colors.textSecondary, marginTop: 4 }}
+        >
+          {progress.message}
+        </AtomicText>
+      </View>
+
+      <View style={styles.progressBarContainer}>
+        <View
+          style={[
+            styles.progressBar,
+            {
+              backgroundColor: tokens.colors.primary,
+              width: `${progress.progress}%`,
+            },
+          ]}
+        />
+      </View>
+
+      <View style={styles.progressStats}>
+        <AtomicText
+          type="labelSmall"
+          style={{ color: tokens.colors.textSecondary }}
+        >
+          {progress.currentFrame} / {progress.totalFrames} frames
+        </AtomicText>
+        <AtomicText
+          type="labelSmall"
+          style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+        >
+          {progress.progress}%
+        </AtomicText>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  progressContainer: {
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 16,
+  },
+  progressHeader: {
+    marginBottom: 12,
+  },
+  progressBarContainer: {
+    height: 8,
+    backgroundColor: "rgba(0, 0, 0, 0.1)",
+    borderRadius: 4,
+    overflow: "hidden",
+    marginBottom: 8,
+  },
+  progressBar: {
+    height: "100%",
+    borderRadius: 4,
+  },
+  progressStats: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+});

package/src/presentation/components/export/OptionSelectorRow.tsx

@@ -0,0 +1,101 @@
+/**
+ * OptionSelectorRow Component
+ * Reusable option selector row for export settings
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface Option<T extends string> {
+  value: T;
+  label: string;
+  textTransform?: "none" | "capitalize" | "uppercase" | "lowercase";
+}
+
+interface OptionSelectorRowProps<T extends string> {
+  title: string;
+  options: Option<T>[];
+  selectedValue: T;
+  onValueChange: (value: T) => void;
+}
+
+export function OptionSelectorRow<T extends string>({
+  title,
+  options,
+  selectedValue,
+  onValueChange,
+}: OptionSelectorRowProps<T>) {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 8,
+        }}
+      >
+        {title}
+      </AtomicText>
+      <View style={styles.optionsRow}>
+        {options.map((option) => (
+          <TouchableOpacity
+            key={option.value}
+            style={[
+              styles.optionButton,
+              {
+                backgroundColor:
+                  selectedValue === option.value
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                borderColor:
+                  selectedValue === option.value
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onValueChange(option.value)}
+          >
+            <AtomicText
+              type="bodySmall"
+              style={{
+                color:
+                  selectedValue === option.value
+                    ? "#FFFFFF"
+                    : tokens.colors.textPrimary,
+                fontWeight: selectedValue === option.value ? "600" : "400",
+                textTransform: option.textTransform || "none",
+              }}
+            >
+              {option.label}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  optionsRow: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  optionButton: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/export/ProjectInfoBox.tsx

@@ -0,0 +1,61 @@
+/**
+ * ProjectInfoBox Component
+ * Project information display for export dialog
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { VideoProject } from "@domains/video";
+
+interface ProjectInfoBoxProps {
+  project: VideoProject;
+  duration: number;
+  estimatedSize: string;
+}
+
+export const ProjectInfoBox: React.FC<ProjectInfoBoxProps> = ({
+  project,
+  duration,
+  estimatedSize,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={[styles.infoBox, { backgroundColor: tokens.colors.surface }]}>
+      <View style={styles.infoRow}>
+        <AtomicIcon name="film-outline" size="md" color="primary" />
+        <View style={{ marginLeft: 12 }}>
+          <AtomicText
+            type="bodyMedium"
+            style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+          >
+            {project.title}
+          </AtomicText>
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.textSecondary, marginTop: 2 }}
+          >
+            Duration: {duration}s • Est. size: {estimatedSize} MB
+          </AtomicText>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  infoBox: {
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 24,
+  },
+  infoRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});

package/src/presentation/components/export/WatermarkToggle.tsx

@@ -0,0 +1,87 @@
+/**
+ * WatermarkToggle Component
+ * Watermark toggle for export dialog
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface WatermarkToggleProps {
+  includeWatermark: boolean;
+  onToggle: (include: boolean) => void;
+}
+
+export const WatermarkToggle: React.FC<WatermarkToggleProps> = ({
+  includeWatermark,
+  onToggle,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <TouchableOpacity
+      style={[styles.toggleRow, { backgroundColor: tokens.colors.surface }]}
+      onPress={() => onToggle(!includeWatermark)}
+    >
+      <View style={{ flex: 1 }}>
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+        >
+          Include Watermark
+        </AtomicText>
+        <AtomicText
+          type="labelSmall"
+          style={{ color: tokens.colors.textSecondary, marginTop: 2 }}
+        >
+          Add app branding to exported video
+        </AtomicText>
+      </View>
+      <View
+        style={[
+          styles.toggle,
+          {
+            backgroundColor: includeWatermark
+              ? tokens.colors.primary
+              : tokens.colors.borderLight,
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.toggleThumb,
+            {
+              backgroundColor: "#FFFFFF",
+              transform: [{ translateX: includeWatermark ? 20 : 0 }],
+            },
+          ]}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  toggleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 16,
+  },
+  toggle: {
+    width: 50,
+    height: 30,
+    borderRadius: 15,
+    padding: 3,
+    justifyContent: "center",
+  },
+  toggleThumb: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+  },
+});

package/src/presentation/components/export/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Export Dialog Components
+ * Barrel file for export dialog components
+ */
+
+export { ProjectInfoBox } from "./ProjectInfoBox";
+export { OptionSelectorRow } from "./OptionSelectorRow";
+export { WatermarkToggle } from "./WatermarkToggle";
+export { ExportProgress } from "./ExportProgress";
+export { ExportInfoBanner } from "./ExportInfoBanner";
+export { ExportActions } from "./ExportActions";

package/src/presentation/components/image-layer/ImagePreview.tsx

@@ -0,0 +1,70 @@
+/**
+ * ImagePreview Component
+ * Image preview or placeholder for image layer editor
+ */
+
+import React from "react";
+import { View, Image, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface ImagePreviewProps {
+  imageUri: string;
+  opacity: number;
+}
+
+export const ImagePreview: React.FC<ImagePreviewProps> = ({
+  imageUri,
+  opacity,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (imageUri) {
+    return (
+      <Image
+        source={{ uri: imageUri }}
+        style={[styles.imagePreview, { opacity }]}
+      />
+    );
+  }
+
+  return (
+    <View
+      style={[
+        styles.imagePlaceholder,
+        {
+          backgroundColor: tokens.colors.surfaceSecondary,
+          borderColor: tokens.colors.borderLight,
+        },
+      ]}
+    >
+      <AtomicIcon name="image-outline" size="xl" color="secondary" />
+      <AtomicText
+        type="bodyMedium"
+        style={{ color: tokens.colors.textSecondary, marginTop: 12 }}
+      >
+        No image selected
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  imagePreview: {
+    width: "100%",
+    height: 200,
+    borderRadius: 12,
+  },
+  imagePlaceholder: {
+    width: "100%",
+    height: 200,
+    borderRadius: 12,
+    borderWidth: 2,
+    borderStyle: "dashed",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/image-layer/ImageSelectionButtons.tsx

@@ -0,0 +1,82 @@
+/**
+ * ImageSelectionButtons Component
+ * Image selection buttons (gallery and camera) for image layer editor
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface ImageSelectionButtonsProps {
+  onPickFromGallery: () => void;
+  onTakePhoto: () => void;
+}
+
+export const ImageSelectionButtons: React.FC<ImageSelectionButtonsProps> = ({
+  onPickFromGallery,
+  onTakePhoto,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.selectionButtons}>
+      <TouchableOpacity
+        style={[
+          styles.selectionButton,
+          {
+            backgroundColor: tokens.colors.surface,
+            borderColor: tokens.colors.borderLight,
+          },
+        ]}
+        onPress={onPickFromGallery}
+      >
+        <AtomicIcon name="FolderOpen" size="md" color="primary" />
+        <AtomicText
+          type="bodySmall"
+          style={{ color: tokens.colors.textPrimary, marginTop: 8 }}
+        >
+          From Gallery
+        </AtomicText>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[
+          styles.selectionButton,
+          {
+            backgroundColor: tokens.colors.surface,
+            borderColor: tokens.colors.borderLight,
+          },
+        ]}
+        onPress={onTakePhoto}
+      >
+        <AtomicIcon name="Camera" size="md" color="primary" />
+        <AtomicText
+          type="bodySmall"
+          style={{ color: tokens.colors.textPrimary, marginTop: 8 }}
+        >
+          Take Photo
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  selectionButtons: {
+    flexDirection: "row",
+    gap: 12,
+    marginBottom: 24,
+  },
+  selectionButton: {
+    flex: 1,
+    paddingVertical: 24,
+    borderRadius: 12,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/image-layer/OpacitySelector.tsx

@@ -0,0 +1,91 @@
+/**
+ * OpacitySelector Component
+ * Opacity selector for image layer
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { IMAGE_OPACITY_OPTIONS } from "../../../constants/image-layer.constants";
+
+interface OpacitySelectorProps {
+  opacity: number;
+  onOpacityChange: (opacity: number) => void;
+}
+
+export const OpacitySelector: React.FC<OpacitySelectorProps> = ({
+  opacity,
+  onOpacityChange,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.opacitySection}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 12,
+        }}
+      >
+        {t("editor.properties.opacity")}: {Math.round(opacity * 100)}%
+      </AtomicText>
+      <View style={styles.opacityButtons}>
+        {IMAGE_OPACITY_OPTIONS.map((value) => (
+          <TouchableOpacity
+            key={value}
+            style={[
+              styles.opacityButton,
+              {
+                backgroundColor:
+                  opacity === value
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                borderColor:
+                  opacity === value
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onOpacityChange(value)}
+          >
+            <AtomicText
+              type="bodySmall"
+              style={{
+                color:
+                  opacity === value ? "#FFFFFF" : tokens.colors.textPrimary,
+                fontWeight: opacity === value ? "600" : "400",
+              }}
+            >
+              {Math.round(value * 100)}%
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  opacitySection: {
+    marginBottom: 24,
+  },
+  opacityButtons: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  opacityButton: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/image-layer/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Image Layer Editor Components
+ * Barrel file for image layer editor components
+ */
+
+export { ImagePreview } from "./ImagePreview";
+export { ImageSelectionButtons } from "./ImageSelectionButtons";
+export { OpacitySelector } from "./OpacitySelector";

package/src/presentation/components/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Editor Presentation Components
+ */
+
+export * from "./EditorHeader";
+export * from "./EditorPreviewArea";
+export * from "./EditorToolPanel";
+export * from "./EditorTimeline";
+export * from "./LayerActionsMenu";
+export * from "./SceneActionsMenu";
+export * from "./TextLayerEditor";
+export * from "./AudioEditor";
+export * from "./ShapeLayerEditor";
+export * from "./AnimationEditor";
+export * from "./DraggableLayer";
+export * from "./ImageLayerEditor";
+export * from "./ExportDialog";