@umituz/react-native-video-editor 1.0.1

package/src/presentation/components/ShapeLayerEditor.tsx

@@ -0,0 +1,108 @@
+/**
+ * ShapeLayerEditor Component
+ * Main component for editing shape layers
+ */
+
+import React from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { ShapeLayer } from "@domains/video";
+import { useShapeLayerForm } from "../../hooks/useShapeLayerForm";
+import {
+  BORDER_WIDTHS,
+  OPACITY_OPTIONS,
+} from "../../constants/shape-layer.constants";
+import {
+  ShapeTypeSelector,
+  ColorPickerHorizontal,
+  ValueSelector,
+  ShapePreview,
+} from "./shape-layer";
+import { EditorActions } from "./text-layer/EditorActions";
+
+interface ShapeLayerEditorProps {
+  layer?: ShapeLayer;
+  onSave: (layerData: Partial<ShapeLayer>) => void;
+  onCancel: () => void;
+}
+
+export const ShapeLayerEditor: React.FC<ShapeLayerEditorProps> = ({
+  layer,
+  onSave,
+  onCancel,
+}) => {
+  const tokens = useAppDesignTokens();
+  const {
+    formState,
+    setShape,
+    setFillColor,
+    setBorderColor,
+    setBorderWidth,
+    setOpacity,
+    buildLayerData,
+  } = useShapeLayerForm(layer);
+
+  const handleSave = () => {
+    onSave(buildLayerData());
+  };
+
+  return (
+    <View style={styles.container}>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <ShapeTypeSelector
+          selectedShape={formState.shape}
+          onShapeChange={setShape}
+        />
+
+        <ColorPickerHorizontal
+          title="Fill Color"
+          selectedColor={formState.fillColor}
+          onColorChange={setFillColor}
+        />
+
+        <ValueSelector
+          title="Border Width"
+          value={formState.borderWidth}
+          options={BORDER_WIDTHS}
+          formatValue={(val) => `${val}px`}
+          onValueChange={setBorderWidth}
+        />
+
+        {formState.borderWidth > 0 && (
+          <ColorPickerHorizontal
+            title="Border Color"
+            selectedColor={formState.borderColor}
+            onColorChange={setBorderColor}
+          />
+        )}
+
+        <ValueSelector
+          title="Opacity"
+          value={formState.opacity}
+          options={OPACITY_OPTIONS}
+          formatValue={(val) => `${Math.round(val * 100)}%`}
+          onValueChange={setOpacity}
+        />
+
+        <ShapePreview formState={formState} />
+      </ScrollView>
+
+      <EditorActions
+        onCancel={onCancel}
+        onSave={handleSave}
+        saveLabel="Add Shape"
+        isValid={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 16,
+  },
+});

package/src/presentation/components/TextLayerEditor.tsx

@@ -0,0 +1,104 @@
+/**
+ * TextLayerEditor Component
+ * Main component for editing text layers
+ */
+
+import React from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { TextLayer } from "@domains/video";
+import { useTextLayerForm } from "../../hooks/useTextLayerForm";
+import {
+  FONT_FAMILIES,
+  FONT_WEIGHTS,
+} from "../../constants/text-layer.constants";
+import {
+  TextInputSection,
+  FontSizeSelector,
+  OptionSelector,
+  TextAlignSelector,
+  ColorPicker,
+  TextPreview,
+  EditorActions,
+} from "./text-layer";
+
+interface TextLayerEditorProps {
+  layer?: TextLayer;
+  onSave: (layerData: Partial<TextLayer>) => void;
+  onCancel: () => void;
+}
+
+export const TextLayerEditor: React.FC<TextLayerEditorProps> = ({
+  layer,
+  onSave,
+  onCancel,
+}) => {
+  const { t } = useLocalization();
+  const {
+    formState,
+    setText,
+    setFontSize,
+    setFontFamily,
+    setFontWeight,
+    setColor,
+    setTextAlign,
+    buildLayerData,
+    isValid,
+  } = useTextLayerForm(layer);
+
+  const handleSave = () => {
+    if (!isValid) return;
+    onSave(buildLayerData());
+  };
+
+  return (
+    <View style={styles.container}>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <TextInputSection text={formState.text} onChangeText={setText} />
+
+        <FontSizeSelector
+          fontSize={formState.fontSize}
+          onFontSizeChange={setFontSize}
+        />
+
+        <OptionSelector
+          title={t("editor.properties.font_family")}
+          options={FONT_FAMILIES.map((f) => ({ label: f, value: f }))}
+          selectedValue={formState.fontFamily}
+          onValueChange={setFontFamily}
+        />
+
+        <OptionSelector
+          title="Font Weight"
+          options={FONT_WEIGHTS}
+          selectedValue={formState.fontWeight}
+          onValueChange={(value) =>
+            setFontWeight(value as "normal" | "bold" | "300" | "700")
+          }
+        />
+
+        <TextAlignSelector
+          textAlign={formState.textAlign}
+          onTextAlignChange={setTextAlign}
+        />
+
+        <ColorPicker selectedColor={formState.color} onColorChange={setColor} />
+
+        <TextPreview formState={formState} />
+      </ScrollView>
+
+      <EditorActions
+        onCancel={onCancel}
+        onSave={handleSave}
+        saveLabel={layer ? "Update" : "Add Text"}
+        isValid={isValid}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    maxHeight: "80%",
+  },
+});

package/src/presentation/components/animation-layer/AnimationEditorActions.tsx

@@ -0,0 +1,104 @@
+/**
+ * AnimationEditorActions Component
+ * Action buttons for animation editor
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface AnimationEditorActionsProps {
+  hasAnimation: boolean;
+  onRemove?: () => void;
+  onCancel: () => void;
+  onSave: () => void;
+}
+
+export const AnimationEditorActions: React.FC<AnimationEditorActionsProps> = ({
+  hasAnimation,
+  onRemove,
+  onCancel,
+  onSave,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.actions}>
+      {hasAnimation && onRemove && (
+        <TouchableOpacity
+          style={[
+            styles.actionButton,
+            styles.removeButton,
+            { borderColor: tokens.colors.error },
+          ]}
+          onPress={onRemove}
+        >
+          <AtomicIcon name="trash-outline" size="sm" color="error" />
+        </TouchableOpacity>
+      )}
+
+      <TouchableOpacity
+        style={[
+          styles.actionButton,
+          styles.cancelButton,
+          { borderColor: tokens.colors.borderLight },
+        ]}
+        onPress={onCancel}
+      >
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.textSecondary }}
+        >
+          Cancel
+        </AtomicText>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[
+          styles.actionButton,
+          styles.saveButton,
+          { backgroundColor: tokens.colors.primary },
+        ]}
+        onPress={onSave}
+      >
+        <AtomicIcon name="Check" size="sm" color="onSurface" />
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: "#FFFFFF", fontWeight: "600", marginLeft: 6 }}
+        >
+          Apply
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  actions: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  actionButton: {
+    flex: 1,
+    flexDirection: "row",
+    paddingVertical: 12,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  removeButton: {
+    flex: 0,
+    paddingHorizontal: 16,
+    borderWidth: 1,
+  },
+  cancelButton: {
+    borderWidth: 1,
+  },
+  saveButton: {
+    // backgroundColor set dynamically
+  },
+});

package/src/presentation/components/animation-layer/AnimationInfoBanner.tsx

@@ -0,0 +1,43 @@
+/**
+ * AnimationInfoBanner Component
+ * Info banner for animation editor
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export const AnimationInfoBanner: React.FC = () => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[
+        styles.infoBanner,
+        { backgroundColor: tokens.colors.primary + "20" },
+      ]}
+    >
+      <AtomicIcon name="Info" size="sm" color="primary" />
+      <AtomicText
+        type="labelSmall"
+        style={{ color: tokens.colors.primary, marginLeft: 8, flex: 1 }}
+      >
+        Animation will play when the layer first appears in the scene
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  infoBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 8,
+  },
+});

package/src/presentation/components/animation-layer/AnimationTypeSelector.tsx

@@ -0,0 +1,105 @@
+/**
+ * AnimationTypeSelector Component
+ * Animation type selector for animation layer
+ */
+
+import React from "react";
+import { View, ScrollView, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { ANIMATION_TYPES } from "../../../constants/animation-layer.constants";
+import type { AnimationType } from "@domains/video";
+
+interface AnimationTypeSelectorProps {
+  selectedType: AnimationType;
+  onTypeChange: (type: AnimationType) => void;
+}
+
+export const AnimationTypeSelector: React.FC<AnimationTypeSelectorProps> = ({
+  selectedType,
+  onTypeChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 12,
+        }}
+      >
+        Animation Type
+      </AtomicText>
+
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={styles.animationTypesScroll}
+      >
+        {ANIMATION_TYPES.map((anim) => (
+          <TouchableOpacity
+            key={anim.type}
+            style={[
+              styles.animationTypeCard,
+              {
+                backgroundColor:
+                  selectedType === anim.type
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                borderColor:
+                  selectedType === anim.type
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onTypeChange(anim.type)}
+          >
+            <AtomicIcon
+              name={anim.icon as any}
+              size="md"
+              color={selectedType === anim.type ? "onSurface" : "primary"}
+            />
+            <AtomicText
+              type="labelSmall"
+              style={{
+                color:
+                  selectedType === anim.type
+                    ? "#FFFFFF"
+                    : tokens.colors.textPrimary,
+                marginTop: 6,
+                fontWeight: selectedType === anim.type ? "600" : "400",
+              }}
+            >
+              {anim.label}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  animationTypesScroll: {
+    marginHorizontal: -16,
+    paddingHorizontal: 16,
+  },
+  animationTypeCard: {
+    width: 90,
+    padding: 12,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+});

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

@@ -0,0 +1,8 @@
+/**
+ * Animation Layer Editor Components
+ * Barrel file for animation layer editor components
+ */
+
+export { AnimationTypeSelector } from "./AnimationTypeSelector";
+export { AnimationEditorActions } from "./AnimationEditorActions";
+export { AnimationInfoBanner } from "./AnimationInfoBanner";

package/src/presentation/components/audio-layer/AudioEditorActions.tsx

@@ -0,0 +1,115 @@
+/**
+ * AudioEditorActions Component
+ * Action buttons for audio editor
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface AudioEditorActionsProps {
+  hasAudio: boolean;
+  onRemove?: () => void;
+  onCancel: () => void;
+  onSave: () => void;
+  isValid: boolean;
+}
+
+export const AudioEditorActions: React.FC<AudioEditorActionsProps> = ({
+  hasAudio,
+  onRemove,
+  onCancel,
+  onSave,
+  isValid,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.actions}>
+      {hasAudio && onRemove && (
+        <TouchableOpacity
+          style={[
+            styles.actionButton,
+            styles.removeButton,
+            { borderColor: tokens.colors.error },
+          ]}
+          onPress={onRemove}
+        >
+          <AtomicIcon name="trash-outline" size="sm" color="error" />
+          <AtomicText
+            type="bodyMedium"
+            style={{ color: tokens.colors.error, marginLeft: 6 }}
+          >
+            Remove
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+
+      <TouchableOpacity
+        style={[
+          styles.actionButton,
+          styles.cancelButton,
+          { borderColor: tokens.colors.borderLight },
+        ]}
+        onPress={onCancel}
+      >
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.textSecondary }}
+        >
+          Cancel
+        </AtomicText>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[
+          styles.actionButton,
+          styles.saveButton,
+          {
+            backgroundColor: isValid
+              ? tokens.colors.primary
+              : tokens.colors.borderLight,
+          },
+        ]}
+        onPress={onSave}
+        disabled={!isValid}
+      >
+        <AtomicIcon name="Check" size="sm" color="onSurface" />
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: "#FFFFFF", fontWeight: "600", marginLeft: 6 }}
+        >
+          Save
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  actions: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  actionButton: {
+    flex: 1,
+    flexDirection: "row",
+    paddingVertical: 12,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  removeButton: {
+    borderWidth: 1,
+  },
+  cancelButton: {
+    borderWidth: 1,
+  },
+  saveButton: {
+    // backgroundColor set dynamically
+  },
+});

package/src/presentation/components/audio-layer/AudioFileSelector.tsx

@@ -0,0 +1,126 @@
+/**
+ * AudioFileSelector Component
+ * Audio file selection for audio layer editor
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { SUPPORTED_AUDIO_FORMATS } from "../../../constants/audio-layer.constants";
+
+interface AudioFileSelectorProps {
+  audioUri: string;
+  onPickAudio: () => void;
+  getFileName: (uri: string) => string;
+}
+
+export const AudioFileSelector: React.FC<AudioFileSelectorProps> = ({
+  audioUri,
+  onPickAudio,
+  getFileName,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (audioUri) {
+    return (
+      <View
+        style={[styles.fileCard, { backgroundColor: tokens.colors.surface }]}
+      >
+        <View style={styles.fileInfo}>
+          <AtomicIcon name="Music" size="md" color="primary" />
+          <View style={{ marginLeft: 12, flex: 1 }}>
+            <AtomicText
+              type="bodySmall"
+              style={{
+                color: tokens.colors.textPrimary,
+                fontWeight: "500",
+              }}
+              numberOfLines={1}
+            >
+              {getFileName(audioUri)}
+            </AtomicText>
+            <AtomicText
+              type="labelSmall"
+              style={{ color: tokens.colors.textSecondary, marginTop: 2 }}
+            >
+              {audioUri.includes("file://") ? "Local file" : "Imported"}
+            </AtomicText>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={[styles.changeButton, { borderColor: tokens.colors.primary }]}
+          onPress={onPickAudio}
+        >
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.primary, fontWeight: "600" }}
+          >
+            Change
+          </AtomicText>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <TouchableOpacity
+      style={[styles.pickButton, { backgroundColor: tokens.colors.surface }]}
+      onPress={onPickAudio}
+    >
+      <AtomicIcon name="Upload" size="md" color="primary" />
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.primary,
+          fontWeight: "600",
+          marginTop: 8,
+        }}
+      >
+        Select Audio File
+      </AtomicText>
+      <AtomicText
+        type="labelSmall"
+        style={{ color: tokens.colors.textSecondary, marginTop: 4 }}
+      >
+        {SUPPORTED_AUDIO_FORMATS}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  pickButton: {
+    padding: 32,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 2,
+    borderColor: "rgba(0, 0, 0, 0.1)",
+    borderStyle: "dashed",
+  },
+  fileCard: {
+    padding: 16,
+    borderRadius: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  fileInfo: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  changeButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+});