@umituz/react-native-video-editor 1.1.62 → 1.1.64

package/src/presentation/components/SubtitleListPanel.tsx

@@ -3,14 +3,14 @@
  * Full subtitle editor panel: list + add/edit modal
  */
 
-import React, { useState, useCallback, useMemo } from "react";
-import { View, ScrollView, TouchableOpacity, Modal, TextInput, StyleSheet } from "react-native";
+import React, { useMemo } from "react";
+import { View, ScrollView } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { SubtitleTimeInput } from "./SubtitleTimeInput";
-import { SubtitleStylePicker } from "./SubtitleStylePicker";
-import { DEFAULT_SUBTITLE_STYLE } from "../../infrastructure/constants/subtitle.constants";
-import { formatTimeDetailed } from "../../infrastructure/utils/srt.utils";
+import { SubtitleListHeader } from "./subtitle/SubtitleListHeader";
+import { SubtitleListItem } from "./subtitle/SubtitleListItem";
+import { SubtitleModal } from "./subtitle/SubtitleModal";
+import { useSubtitleForm } from "./subtitle/useSubtitleForm";
 import type { Subtitle, SubtitleStyle } from "../../domain/entities/video-project.types";
 
 interface SubtitleListPanelProps {
@@ -34,272 +34,66 @@ export const SubtitleListPanel: React.FC<SubtitleListPanelProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const [showModal, setShowModal] = useState(false);
-  const [editing, setEditing] = useState<Subtitle | null>(null);
-  const [text, setText] = useState("");
-  const [startTime, setStartTime] = useState(0);
-  const [endTime, setEndTime] = useState(3);
-  const [style, setStyle] = useState<SubtitleStyle>({ ...DEFAULT_SUBTITLE_STYLE });
-
-  const styles = useMemo(() => StyleSheet.create({
-    header: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.sm,
-      borderBottomWidth: 1,
-      borderBottomColor: tokens.colors.border,
-    },
-    addBtn: {
-      width: 34,
-      height: 34,
-      borderRadius: 17,
-      backgroundColor: tokens.colors.primary,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    emptyBox: {
-      alignItems: "center",
-      paddingTop: tokens.spacing.xl,
-      gap: tokens.spacing.sm,
-    },
-    item: {
-      flexDirection: "row",
-      alignItems: "center",
-      backgroundColor: tokens.colors.surface,
-      borderRadius: tokens.borders.radius.md,
-      marginHorizontal: tokens.spacing.md,
-      marginBottom: tokens.spacing.sm,
-      borderWidth: 1,
-      borderColor: tokens.colors.border,
-      overflow: "hidden",
-    },
-    itemActive: {
-      borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primaryContainer,
-    },
-    itemBar: { width: 4, alignSelf: "stretch", backgroundColor: tokens.colors.surfaceVariant },
-    itemBarActive: { backgroundColor: tokens.colors.primary },
-    itemContent: { flex: 1, padding: tokens.spacing.sm },
-    itemTimeRow: { flexDirection: "row", alignItems: "center", gap: tokens.spacing.xs, marginBottom: 2 },
-    itemEditBtn: {
-      width: 40,
-      height: 40,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    // Modal
-    overlay: {
-      flex: 1,
-      backgroundColor: "rgba(0,0,0,0.5)",
-      justifyContent: "flex-end",
-    },
-    modal: {
-      backgroundColor: tokens.colors.surface,
-      borderTopLeftRadius: tokens.borders.radius.xl,
-      borderTopRightRadius: tokens.borders.radius.xl,
-      paddingHorizontal: tokens.spacing.md,
-      paddingTop: tokens.spacing.md,
-      paddingBottom: tokens.spacing.xl,
-      maxHeight: "90%",
-    },
-    handle: {
-      width: 36,
-      height: 4,
-      borderRadius: 2,
-      backgroundColor: tokens.colors.border,
-      alignSelf: "center",
-      marginBottom: tokens.spacing.md,
-    },
-    textInput: {
-      backgroundColor: tokens.colors.surfaceVariant,
-      borderRadius: tokens.borders.radius.md,
-      padding: tokens.spacing.md,
-      color: tokens.colors.textPrimary,
-      fontSize: 16,
-      minHeight: 80,
-      textAlignVertical: "top",
-      marginBottom: tokens.spacing.md,
-      borderWidth: 1,
-      borderColor: tokens.colors.border,
-    },
-    timeRow: {
-      flexDirection: "row",
-      gap: tokens.spacing.md,
-      marginBottom: tokens.spacing.md,
-    },
-    actionRow: {
-      flexDirection: "row",
-      gap: tokens.spacing.md,
-      marginTop: tokens.spacing.md,
-    },
-    cancelBtn: {
-      flex: 1,
-      paddingVertical: tokens.spacing.md,
-      borderRadius: tokens.borders.radius.md,
-      backgroundColor: tokens.colors.surfaceVariant,
-      alignItems: "center",
-    },
-    saveBtn: {
-      flex: 1,
-      paddingVertical: tokens.spacing.md,
-      borderRadius: tokens.borders.radius.md,
-      backgroundColor: tokens.colors.primary,
-      alignItems: "center",
-    },
-    saveBtnDisabled: { opacity: 0.4 },
-  }), [tokens]);
+  const form = useSubtitleForm();
 
   const activeId = useMemo(() => {
     return subtitles.find((s) => currentTime >= s.startTime && currentTime <= s.endTime)?.id ?? null;
   }, [subtitles, currentTime]);
 
-  const openAdd = useCallback(() => {
-    setEditing(null);
-    setText("");
-    setStartTime(Math.floor(currentTime));
-    setEndTime(Math.floor(currentTime) + 3);
-    setStyle({ ...DEFAULT_SUBTITLE_STYLE });
-    setShowModal(true);
-  }, [currentTime]);
-
-  const openEdit = useCallback((sub: Subtitle) => {
-    setEditing(sub);
-    setText(sub.text);
-    setStartTime(sub.startTime);
-    setEndTime(sub.endTime);
-    setStyle({ ...sub.style });
-    setShowModal(true);
-  }, []);
-
-  const handleSave = useCallback(() => {
-    if (!text.trim()) return;
-    const resolvedEnd = Math.max(endTime, startTime + 0.5);
-    if (editing) {
-      onUpdate(editing.id, { text: text.trim(), startTime, endTime: resolvedEnd, style });
-    } else {
-      onAdd(text.trim(), startTime, resolvedEnd, style);
-    }
-    setShowModal(false);
-  }, [text, editing, startTime, endTime, style, onAdd, onUpdate]);
+  const emptyStyles = {
+    emptyBox: {
+      alignItems: "center" as const,
+      paddingTop: tokens.spacing.xl,
+      gap: tokens.spacing.sm,
+    },
+  };
 
   return (
     <View style={{ flex: 1 }}>
-      {/* Header */}
-      <View style={styles.header}>
-        <AtomicText fontWeight="semibold" color="textPrimary">
-          {t("subtitle.panel.title") || "Subtitles"} ({subtitles.length})
-        </AtomicText>
-        <TouchableOpacity style={styles.addBtn} onPress={openAdd} accessibilityRole="button">
-          <AtomicIcon name="add" size="sm" color="onPrimary" />
-        </TouchableOpacity>
-      </View>
+      <SubtitleListHeader
+        count={subtitles.length}
+        onAdd={() => form.openAdd(currentTime)}
+        title={t("subtitle.panel.title") || "Subtitles"}
+      />
 
-      {/* List */}
       <ScrollView contentContainerStyle={{ paddingVertical: tokens.spacing.sm }}>
         {subtitles.length === 0 ? (
-          <View style={styles.emptyBox}>
+          <View style={emptyStyles.emptyBox}>
             <AtomicIcon name="video" size="lg" color="textSecondary" />
-            <AtomicText color="textSecondary">{t("subtitle.panel.empty") || "No subtitles yet"}</AtomicText>
+            <AtomicText color="textSecondary">
+              {t("subtitle.panel.empty") || "No subtitles yet"}
+            </AtomicText>
             <AtomicText type="labelSmall" color="textTertiary">
               {t("subtitle.panel.emptyHint") || "Tap + to add a subtitle"}
             </AtomicText>
           </View>
         ) : (
-          subtitles.map((sub) => {
-            const isActive = sub.id === activeId;
-            return (
-              <TouchableOpacity
-                key={sub.id}
-                style={[styles.item, isActive && styles.itemActive]}
-                onPress={() => onSeek(sub.startTime)}
-                accessibilityRole="button"
-              >
-                <View style={[styles.itemBar, isActive && styles.itemBarActive]} />
-                <View style={styles.itemContent}>
-                  <View style={styles.itemTimeRow}>
-                    <AtomicText type="labelSmall" color="textSecondary">
-                      {formatTimeDetailed(sub.startTime)}
-                    </AtomicText>
-                    <AtomicText type="labelSmall" color="textTertiary">→</AtomicText>
-                    <AtomicText type="labelSmall" color="textSecondary">
-                      {formatTimeDetailed(sub.endTime)}
-                    </AtomicText>
-                  </View>
-                  <AtomicText color="textPrimary" numberOfLines={2}>
-                    {sub.text}
-                  </AtomicText>
-                </View>
-                <TouchableOpacity
-                  style={styles.itemEditBtn}
-                  onPress={() => openEdit(sub)}
-                  accessibilityRole="button"
-                >
-                  <AtomicIcon name="edit" size="sm" color="textSecondary" />
-                </TouchableOpacity>
-              </TouchableOpacity>
-            );
-          })
+          subtitles.map((subtitle) => (
+            <SubtitleListItem
+              key={subtitle.id}
+              subtitle={subtitle}
+              isActive={subtitle.id === activeId}
+              onEdit={form.openEdit}
+              onSeek={onSeek}
+            />
+          ))
         )}
       </ScrollView>
 
-      {/* Add/Edit Modal */}
-      <Modal visible={showModal} animationType="slide" transparent onRequestClose={() => setShowModal(false)}>
-        <TouchableOpacity style={styles.overlay} activeOpacity={1} onPress={() => setShowModal(false)}>
-          <TouchableOpacity style={styles.modal} activeOpacity={1} onPress={() => {}}>
-            <View style={styles.handle} />
-            <ScrollView showsVerticalScrollIndicator={false}>
-              <AtomicText fontWeight="bold" color="textPrimary" style={{ marginBottom: tokens.spacing.md, fontSize: 18 }}>
-                {editing ? t("subtitle.modal.edit") || "Edit Subtitle" : t("subtitle.modal.add") || "Add Subtitle"}
-              </AtomicText>
-
-              <TextInput
-                style={styles.textInput}
-                value={text}
-                onChangeText={setText}
-                placeholder={t("subtitle.modal.placeholder") || "Enter subtitle text…"}
-                placeholderTextColor={tokens.colors.textSecondary}
-                multiline
-                numberOfLines={3}
-              />
-
-              <View style={styles.timeRow}>
-                <SubtitleTimeInput
-                  label={t("subtitle.modal.startTime") || "Start"}
-                  value={startTime}
-                  onChange={setStartTime}
-                />
-                <SubtitleTimeInput
-                  label={t("subtitle.modal.endTime") || "End"}
-                  value={endTime}
-                  onChange={setEndTime}
-                />
-              </View>
-
-              <SubtitleStylePicker style={style} previewText={text} onChange={setStyle} t={t} />
-
-              <View style={styles.actionRow}>
-                <TouchableOpacity style={styles.cancelBtn} onPress={() => setShowModal(false)} accessibilityRole="button">
-                  <AtomicText fontWeight="semibold" color="textSecondary">
-                    {t("common.cancel") || "Cancel"}
-                  </AtomicText>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={[styles.saveBtn, !text.trim() && styles.saveBtnDisabled]}
-                  onPress={handleSave}
-                  disabled={!text.trim()}
-                  accessibilityRole="button"
-                >
-                  <AtomicText fontWeight="semibold" color="onPrimary">
-                    {t("common.save") || "Save"}
-                  </AtomicText>
-                </TouchableOpacity>
-              </View>
-            </ScrollView>
-          </TouchableOpacity>
-        </TouchableOpacity>
-      </Modal>
+      <SubtitleModal
+        visible={form.showModal}
+        editing={!!form.editing}
+        text={form.text}
+        startTime={form.startTime}
+        endTime={form.endTime}
+        style={form.style}
+        onChangeText={form.setText}
+        onChangeStartTime={form.setStartTime}
+        onChangeEndTime={form.setEndTime}
+        onChangeStyle={form.setStyle}
+        onSave={() => form.save(onAdd, onUpdate)}
+        onCancel={form.close}
+      />
     </View>
   );
 };

package/src/presentation/components/collage/CollageCanvas.tsx

@@ -0,0 +1,94 @@
+/**
+ * CollageCanvas Component
+ * Main canvas rendering for collage editor
+ */
+
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { Image } from "expo-image";
+import { AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import type { CollageLayout } from "../../../infrastructure/constants/collage.constants";
+
+interface CollageCanvasProps {
+  layout: CollageLayout;
+  images: (string | null)[];
+  spacing: number;
+  borderRadius: number;
+  onCellPress: (index: number) => void;
+  size: number;
+}
+
+export const CollageCanvas: React.FC<CollageCanvasProps> = ({
+  layout,
+  images,
+  spacing,
+  borderRadius,
+  onCellPress,
+  size,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = {
+    canvas: {
+      width: size,
+      height: size,
+      alignSelf: "center" as const,
+      position: "relative" as const,
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.md,
+      overflow: "hidden" as const,
+    },
+    cell: {
+      position: "absolute" as const,
+      overflow: "hidden" as const,
+    },
+    cellImage: {
+      width: "100%" as const,
+      height: "100%" as const,
+    },
+    cellEmpty: {
+      flex: 1,
+      backgroundColor: tokens.colors.surfaceVariant,
+      alignItems: "center" as const,
+      justifyContent: "center" as const,
+    },
+  };
+
+  return (
+    <View style={styles.canvas}>
+      {layout.grid.map((cell, index) => {
+        const [cx, cy, cw, ch] = cell;
+        const cellStyle = {
+          left: cx * size + spacing,
+          top: cy * size + spacing,
+          width: cw * size - spacing * 2,
+          height: ch * size - spacing * 2,
+          borderRadius,
+        };
+
+        return (
+          <TouchableOpacity
+            key={index}
+            style={[styles.cell, cellStyle]}
+            onPress={() => onCellPress(index)}
+            accessibilityLabel={`Cell ${index + 1}`}
+            accessibilityRole="button"
+          >
+            {images[index] ? (
+              <Image
+                source={{ uri: images[index]! }}
+                style={[styles.cellImage, { borderRadius }]}
+                contentFit="cover"
+              />
+            ) : (
+              <View style={styles.cellEmpty}>
+                <AtomicIcon name="add" size="md" color="textSecondary" />
+              </View>
+            )}
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};

package/src/presentation/components/collage/CollageControls.tsx

@@ -0,0 +1,115 @@
+/**
+ * CollageControls Component
+ * Controls for spacing and border radius in collage editor
+ */
+
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+interface CollageControlsProps {
+  spacing: number;
+  borderRadius: number;
+  onSpacingChange: (value: number) => void;
+  onBorderRadiusChange: (value: number) => void;
+  t: (key: string) => string;
+}
+
+export const CollageControls: React.FC<CollageControlsProps> = ({
+  spacing,
+  borderRadius,
+  onSpacingChange,
+  onBorderRadiusChange,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = {
+    controls: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingTop: tokens.spacing.md,
+      gap: tokens.spacing.sm,
+    },
+    controlRow: {
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      justifyContent: "space-between" as const,
+    },
+    stepper: {
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      gap: tokens.spacing.sm,
+    },
+    stepBtn: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      backgroundColor: tokens.colors.surfaceVariant,
+      alignItems: "center" as const,
+      justifyContent: "center" as const,
+    },
+    stepValue: {
+      minWidth: 28,
+      textAlign: "center" as const,
+    },
+  };
+
+  return (
+    <View style={styles.controls}>
+      <View style={styles.controlRow}>
+        <AtomicText type="labelSmall" color="textSecondary">
+          {t("editor.collage.spacing") || "Spacing"}
+        </AtomicText>
+        <View style={styles.stepper}>
+          <TouchableOpacity
+            style={styles.stepBtn}
+            onPress={() => onSpacingChange(Math.max(0, spacing - 2))}
+            accessibilityLabel="Decrease spacing"
+            accessibilityRole="button"
+          >
+            <AtomicIcon name="chevron-back" size="sm" color="textSecondary" />
+          </TouchableOpacity>
+          <AtomicText fontWeight="bold" style={styles.stepValue}>
+            {spacing}
+          </AtomicText>
+          <TouchableOpacity
+            style={styles.stepBtn}
+            onPress={() => onSpacingChange(Math.min(16, spacing + 2))}
+            accessibilityLabel="Increase spacing"
+            accessibilityRole="button"
+          >
+            <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      <View style={styles.controlRow}>
+        <AtomicText type="labelSmall" color="textSecondary">
+          {t("editor.collage.borderRadius") || "Corner Radius"}
+        </AtomicText>
+        <View style={styles.stepper}>
+          <TouchableOpacity
+            style={styles.stepBtn}
+            onPress={() => onBorderRadiusChange(Math.max(0, borderRadius - 4))}
+            accessibilityLabel="Decrease border radius"
+            accessibilityRole="button"
+          >
+            <AtomicIcon name="chevron-back" size="sm" color="textSecondary" />
+          </TouchableOpacity>
+          <AtomicText fontWeight="bold" style={styles.stepValue}>
+            {borderRadius}
+          </AtomicText>
+          <TouchableOpacity
+            style={styles.stepBtn}
+            onPress={() => onBorderRadiusChange(Math.min(32, borderRadius + 4))}
+            accessibilityLabel="Increase border radius"
+            accessibilityRole="button"
+          >
+            <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/presentation/components/collage/CollageLayoutSelector.tsx

@@ -0,0 +1,100 @@
+/**
+ * CollageLayoutSelector Component
+ * Layout picker for collage editor
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { COLLAGE_LAYOUTS } from "../../../infrastructure/constants/collage.constants";
+import type { CollageLayout } from "../../../infrastructure/constants/collage.constants";
+
+interface CollageLayoutSelectorProps {
+  selected: CollageLayout;
+  onSelect: (layout: CollageLayout) => void;
+}
+
+export const CollageLayoutSelector: React.FC<CollageLayoutSelectorProps> = ({
+  selected,
+  onSelect,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = {
+    layoutSection: {
+      paddingTop: tokens.spacing.sm,
+    },
+    layoutScroll: {
+      paddingHorizontal: tokens.spacing.md,
+      gap: tokens.spacing.sm,
+    },
+    layoutCard: {
+      width: 64,
+      alignItems: "center" as const,
+      gap: tokens.spacing.xs,
+    },
+    layoutPreview: {
+      width: 52,
+      height: 52,
+      borderRadius: tokens.borders.radius.sm,
+      overflow: "hidden" as const,
+      position: "relative" as const,
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderWidth: 2,
+      borderColor: "transparent",
+    },
+    layoutPreviewActive: {
+      borderColor: tokens.colors.primary,
+    },
+  };
+
+  return (
+    <View style={styles.layoutSection}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.layoutScroll}
+      >
+        {COLLAGE_LAYOUTS.map((layout) => (
+          <TouchableOpacity
+            key={layout.id}
+            style={styles.layoutCard}
+            onPress={() => onSelect(layout)}
+            accessibilityLabel={`Layout ${layout.id}`}
+            accessibilityRole="button"
+            accessibilityState={{ selected: selected.id === layout.id }}
+          >
+            <View
+              style={[
+                styles.layoutPreview,
+                selected.id === layout.id && styles.layoutPreviewActive,
+              ]}
+            >
+              {layout.grid.map((cell, index) => {
+                const [cx, cy, cw, ch] = cell;
+                return (
+                  <View
+                    key={index}
+                    style={{
+                      position: "absolute",
+                      left: `${cx * 100}%`,
+                      top: `${cy * 100}%`,
+                      width: `${cw * 100}%`,
+                      height: `${ch * 100}%`,
+                      borderWidth: 1,
+                      borderColor: tokens.colors.border,
+                      backgroundColor:
+                        selected.id === layout.id
+                          ? tokens.colors.primaryContainer
+                          : "transparent",
+                    }}
+                  />
+                );
+              })}
+            </View>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};