@umituz/react-native-video-editor 1.0.1

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

@@ -0,0 +1,151 @@
+/**
+ * FadeEffectsSelector Component
+ * Fade in/out effects selector for audio layer
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import {
+  FADE_IN_OPTIONS,
+  FADE_OUT_OPTIONS,
+} from "../../../constants/audio-layer.constants";
+
+interface FadeEffectsSelectorProps {
+  fadeIn: number;
+  fadeOut: number;
+  onFadeInChange: (fadeIn: number) => void;
+  onFadeOutChange: (fadeOut: number) => void;
+}
+
+export const FadeEffectsSelector: React.FC<FadeEffectsSelectorProps> = ({
+  fadeIn,
+  fadeOut,
+  onFadeInChange,
+  onFadeOutChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 8,
+        }}
+      >
+        Fade Effects (ms)
+      </AtomicText>
+
+      <View style={styles.fadeRow}>
+        <View style={{ flex: 1 }}>
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.textSecondary, marginBottom: 6 }}
+          >
+            Fade In
+          </AtomicText>
+          <View style={styles.fadeButtons}>
+            {FADE_IN_OPTIONS.map((val) => (
+              <TouchableOpacity
+                key={`in-${val}`}
+                style={[
+                  styles.fadeButton,
+                  {
+                    backgroundColor:
+                      fadeIn === val
+                        ? tokens.colors.primary
+                        : tokens.colors.surface,
+                    borderColor:
+                      fadeIn === val
+                        ? tokens.colors.primary
+                        : tokens.colors.borderLight,
+                  },
+                ]}
+                onPress={() => onFadeInChange(val)}
+              >
+                <AtomicText
+                  type="labelSmall"
+                  style={{
+                    color:
+                      fadeIn === val ? "#FFFFFF" : tokens.colors.textPrimary,
+                    fontSize: 11,
+                  }}
+                >
+                  {val}
+                </AtomicText>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+
+        <View style={{ flex: 1, marginLeft: 12 }}>
+          <AtomicText
+            type="labelSmall"
+            style={{ color: tokens.colors.textSecondary, marginBottom: 6 }}
+          >
+            Fade Out
+          </AtomicText>
+          <View style={styles.fadeButtons}>
+            {FADE_OUT_OPTIONS.map((val) => (
+              <TouchableOpacity
+                key={`out-${val}`}
+                style={[
+                  styles.fadeButton,
+                  {
+                    backgroundColor:
+                      fadeOut === val
+                        ? tokens.colors.primary
+                        : tokens.colors.surface,
+                    borderColor:
+                      fadeOut === val
+                        ? tokens.colors.primary
+                        : tokens.colors.borderLight,
+                  },
+                ]}
+                onPress={() => onFadeOutChange(val)}
+              >
+                <AtomicText
+                  type="labelSmall"
+                  style={{
+                    color:
+                      fadeOut === val ? "#FFFFFF" : tokens.colors.textPrimary,
+                    fontSize: 11,
+                  }}
+                >
+                  {val}
+                </AtomicText>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  fadeRow: {
+    flexDirection: "row",
+  },
+  fadeButtons: {
+    flexDirection: "row",
+    gap: 6,
+  },
+  fadeButton: {
+    flex: 1,
+    paddingVertical: 8,
+    borderRadius: 6,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

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

@@ -0,0 +1,43 @@
+/**
+ * InfoBanner Component
+ * Info banner for audio layer editor
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export const InfoBanner: 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 }}
+      >
+        Audio will play as background music for this scene
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  infoBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+});

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

@@ -0,0 +1,98 @@
+/**
+ * VolumeSelector Component
+ * Volume control for audio layer
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { VOLUME_OPTIONS } from "../../../constants/audio-layer.constants";
+
+interface VolumeSelectorProps {
+  volume: number;
+  onVolumeChange: (volume: number) => void;
+}
+
+export const VolumeSelector: React.FC<VolumeSelectorProps> = ({
+  volume,
+  onVolumeChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <View style={styles.sliderHeader}>
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+        >
+          Volume
+        </AtomicText>
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.primary, fontWeight: "600" }}
+        >
+          {Math.round(volume * 100)}%
+        </AtomicText>
+      </View>
+
+      <View style={styles.volumeButtons}>
+        {VOLUME_OPTIONS.map((val) => (
+          <TouchableOpacity
+            key={val}
+            style={[
+              styles.volumeButton,
+              {
+                backgroundColor:
+                  volume === val
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                borderColor:
+                  volume === val
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onVolumeChange(val)}
+          >
+            <AtomicText
+              type="labelSmall"
+              style={{
+                color: volume === val ? "#FFFFFF" : tokens.colors.textPrimary,
+                fontWeight: volume === val ? "600" : "400",
+              }}
+            >
+              {Math.round(val * 100)}%
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  sliderHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 12,
+  },
+  volumeButtons: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  volumeButton: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

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

@@ -0,0 +1,10 @@
+/**
+ * Audio Layer Editor Components
+ * Barrel file for audio layer editor components
+ */
+
+export { AudioFileSelector } from "./AudioFileSelector";
+export { VolumeSelector } from "./VolumeSelector";
+export { FadeEffectsSelector } from "./FadeEffectsSelector";
+export { InfoBanner } from "./InfoBanner";
+export { AudioEditorActions } from "./AudioEditorActions";

package/src/presentation/components/draggable-layer/LayerContent.tsx

@@ -0,0 +1,106 @@
+/**
+ * LayerContent Component
+ * Renders different layer types (text, image, shape)
+ */
+
+import React from "react";
+import { View, Image, Text as RNText, StyleSheet } from "react-native";
+import {
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { Layer, TextLayer, ImageLayer, ShapeLayer } from "@domains/video";
+
+interface LayerContentProps {
+  layer: Layer;
+}
+
+export const LayerContent: React.FC<LayerContentProps> = ({ layer }) => {
+  const tokens = useAppDesignTokens();
+
+  switch (layer.type) {
+    case "text": {
+      const textLayer = layer as TextLayer;
+      return (
+        <View style={styles.textContainer}>
+          <RNText
+            adjustsFontSizeToFit
+            minimumFontScale={0.3}
+            style={{
+              fontSize: textLayer.fontSize,
+              color: textLayer.color,
+              fontWeight: textLayer.fontWeight,
+              textAlign: textLayer.textAlign,
+              width: "100%",
+              height: "100%",
+              textAlignVertical: "center",
+            }}
+          >
+            {textLayer.content}
+          </RNText>
+        </View>
+      );
+    }
+
+    case "image": {
+      const imageLayer = layer as ImageLayer;
+      return imageLayer.uri ? (
+        <Image
+          source={{ uri: imageLayer.uri }}
+          style={styles.layerImage}
+          resizeMode="cover"
+        />
+      ) : (
+        <View style={styles.imagePlaceholder}>
+          <AtomicIcon name="image-outline" size="md" color="secondary" />
+        </View>
+      );
+    }
+
+    case "shape": {
+      const shapeLayer = layer as ShapeLayer;
+      return (
+        <View
+          style={[
+            styles.shapeLayer,
+            {
+              backgroundColor: shapeLayer.fillColor,
+              borderRadius: shapeLayer.shape === "circle" ? 9999 : 0,
+              borderColor: shapeLayer.borderColor,
+              borderWidth: shapeLayer.borderWidth || 0,
+            },
+          ]}
+        />
+      );
+    }
+
+    default:
+      return null;
+  }
+};
+
+const styles = StyleSheet.create({
+  textContainer: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 4,
+    overflow: "hidden",
+  },
+  layerImage: {
+    width: "100%",
+    height: "100%",
+  },
+  imagePlaceholder: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0,0,0,0.1)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  shapeLayer: {
+    width: "100%",
+    height: "100%",
+  },
+});

package/src/presentation/components/draggable-layer/ResizeHandles.tsx

@@ -0,0 +1,97 @@
+/**
+ * ResizeHandles Component
+ * Resize handles for draggable layers
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated from "react-native-reanimated";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+interface ResizeHandlesProps {
+  topLeftGesture: ReturnType<typeof Gesture.Pan>;
+  topRightGesture: ReturnType<typeof Gesture.Pan>;
+  bottomLeftGesture: ReturnType<typeof Gesture.Pan>;
+  bottomRightGesture: ReturnType<typeof Gesture.Pan>;
+}
+
+export const ResizeHandles: React.FC<ResizeHandlesProps> = ({
+  topLeftGesture,
+  topRightGesture,
+  bottomLeftGesture,
+  bottomRightGesture,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <>
+      <GestureDetector gesture={topLeftGesture}>
+        <Animated.View
+          style={[
+            styles.handle,
+            styles.handleTopLeft,
+            { backgroundColor: tokens.colors.primary },
+          ]}
+        />
+      </GestureDetector>
+
+      <GestureDetector gesture={topRightGesture}>
+        <Animated.View
+          style={[
+            styles.handle,
+            styles.handleTopRight,
+            { backgroundColor: tokens.colors.primary },
+          ]}
+        />
+      </GestureDetector>
+
+      <GestureDetector gesture={bottomLeftGesture}>
+        <Animated.View
+          style={[
+            styles.handle,
+            styles.handleBottomLeft,
+            { backgroundColor: tokens.colors.primary },
+          ]}
+        />
+      </GestureDetector>
+
+      <GestureDetector gesture={bottomRightGesture}>
+        <Animated.View
+          style={[
+            styles.handle,
+            styles.handleBottomRight,
+            { backgroundColor: tokens.colors.primary },
+          ]}
+        />
+      </GestureDetector>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  handle: {
+    position: "absolute",
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    borderWidth: 2,
+    borderColor: "#FFFFFF",
+  },
+  handleTopLeft: {
+    top: -6,
+    left: -6,
+  },
+  handleTopRight: {
+    top: -6,
+    right: -6,
+  },
+  handleBottomLeft: {
+    bottom: -6,
+    left: -6,
+  },
+  handleBottomRight: {
+    bottom: -6,
+    right: -6,
+  },
+});

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

@@ -0,0 +1,7 @@
+/**
+ * Draggable Layer Components
+ * Barrel file for draggable layer components
+ */
+
+export { LayerContent } from "./LayerContent";
+export { ResizeHandles } from "./ResizeHandles";

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

@@ -0,0 +1,101 @@
+/**
+ * ExportActions Component
+ * Action buttons for export dialog
+ */
+
+import React from "react";
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+} from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface ExportActionsProps {
+  isExporting: boolean;
+  onCancel: () => void;
+  onExport: () => void;
+}
+
+export const ExportActions: React.FC<ExportActionsProps> = ({
+  isExporting,
+  onCancel,
+  onExport,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.actions}>
+      <TouchableOpacity
+        style={[
+          styles.actionButton,
+          styles.cancelButton,
+          {
+            borderColor: tokens.colors.borderLight,
+            opacity: isExporting ? 0.5 : 1,
+          },
+        ]}
+        onPress={onCancel}
+        disabled={isExporting}
+      >
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: tokens.colors.textSecondary }}
+        >
+          Cancel
+        </AtomicText>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[
+          styles.actionButton,
+          styles.exportButton,
+          {
+            backgroundColor: tokens.colors.primary,
+            opacity: isExporting ? 0.7 : 1,
+          },
+        ]}
+        onPress={onExport}
+        disabled={isExporting}
+      >
+        {isExporting ? (
+          <ActivityIndicator color="#FFFFFF" size="small" />
+        ) : (
+          <AtomicIcon name="Download" size="sm" color="onSurface" />
+        )}
+        <AtomicText
+          type="bodyMedium"
+          style={{ color: "#FFFFFF", fontWeight: "600", marginLeft: 8 }}
+        >
+          {isExporting ? "Exporting..." : "Export Video"}
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  actions: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  actionButton: {
+    flex: 1,
+    flexDirection: "row",
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  cancelButton: {
+    borderWidth: 1,
+  },
+  exportButton: {
+    // backgroundColor set dynamically
+  },
+});

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

@@ -0,0 +1,44 @@
+/**
+ * ExportInfoBanner Component
+ * Info banner for export dialog
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export const ExportInfoBanner: 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 }}
+      >
+        Note: Full video encoding with frame rendering is a foundational
+        feature. This demo simulates the export process.
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  infoBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 24,
+  },
+});