@umituz/react-native-video-editor 1.1.39 → 1.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.1.39",
+  "version": "1.1.41",
   "description": "Professional video editor with layer-based timeline, text/image/shape/audio/animation layers, and export functionality",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/VideoEditor.tsx

@@ -0,0 +1,210 @@
+/**
+ * VideoEditor Component
+ * Self-contained full-screen video editor.
+ * Mirrors PhotoEditor API: accepts videoUri, onClose, onSave.
+ */
+
+import React, { useState, useMemo, useRef, useCallback } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { BottomSheetModal } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
+
+import { VideoPlayer } from "./player/presentation/components/VideoPlayer";
+import { VideoFilterPicker } from "./presentation/components/VideoFilterPicker";
+import { SpeedControlPanel } from "./presentation/components/SpeedControlPanel";
+import { FILTER_PRESETS, DEFAULT_FILTER } from "./infrastructure/constants/filter.constants";
+import { DEFAULT_PLAYBACK_RATE } from "./infrastructure/constants/speed.constants";
+import type { FilterPreset } from "./domain/entities/video-project.types";
+
+export interface VideoEditorProps {
+  videoUri: string;
+  onClose: () => void;
+  onSave?: (uri: string, filter: FilterPreset, playbackRate: number) => void;
+  title?: string;
+  t: (key: string) => string;
+}
+
+type ActiveTool = "filters" | "speed" | null;
+
+export const VideoEditor: React.FC<VideoEditorProps> = ({
+  videoUri,
+  onClose,
+  onSave,
+  title,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  const [activeFilter, setActiveFilter] = useState<FilterPreset>(DEFAULT_FILTER);
+  const [playbackRate, setPlaybackRate] = useState(DEFAULT_PLAYBACK_RATE);
+  const [activeTool, setActiveTool] = useState<ActiveTool>(null);
+
+  const filterSheetRef = useRef<{ present: () => void; dismiss: () => void }>(null);
+  const speedSheetRef = useRef<{ present: () => void; dismiss: () => void }>(null);
+
+  const handleToggleTool = useCallback((tool: Exclude<ActiveTool, null>) => {
+    if (activeTool === tool) {
+      setActiveTool(null);
+      if (tool === "filters") filterSheetRef.current?.dismiss();
+      else speedSheetRef.current?.dismiss();
+    } else {
+      setActiveTool(tool);
+      if (tool === "filters") filterSheetRef.current?.present();
+      else speedSheetRef.current?.present();
+    }
+  }, [activeTool]);
+
+  const handleSave = useCallback(() => {
+    onSave?.(videoUri, activeFilter, playbackRate);
+    onClose();
+  }, [onSave, onClose, videoUri, activeFilter, playbackRate]);
+
+  const styles = useMemo(() => StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: tokens.colors.backgroundPrimary,
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingTop: insets.top + tokens.spacing.sm,
+      paddingBottom: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      backgroundColor: tokens.colors.surface,
+    },
+    headerTitle: {
+      flex: 1,
+      textAlign: "center",
+    },
+    headerBtn: {
+      width: 40,
+      height: 40,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    videoArea: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: tokens.colors.backgroundPrimary,
+    },
+    toolbar: {
+      flexDirection: "row",
+      justifyContent: "space-around",
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.md,
+      paddingBottom: insets.bottom + tokens.spacing.md,
+      backgroundColor: tokens.colors.surface,
+      borderTopWidth: 1,
+      borderTopColor: tokens.colors.border,
+    },
+    toolBtn: {
+      alignItems: "center",
+      gap: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.lg,
+    },
+    toolBtnActive: {
+      opacity: 1,
+    },
+  }), [tokens, insets]);
+
+  const TOOLS: { id: Exclude<ActiveTool, null>; icon: string; labelKey: string }[] = [
+    { id: "filters", icon: "sparkles", labelKey: "editor.tools.filters" },
+    { id: "speed", icon: "flash", labelKey: "editor.tools.speed" },
+  ];
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity
+          style={styles.headerBtn}
+          onPress={onClose}
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+        >
+          <AtomicIcon name="close" size="md" color="textPrimary" />
+        </TouchableOpacity>
+
+        <AtomicText type="headlineSmall" style={styles.headerTitle}>
+          {title || t("editor.video.title") || "Edit Video"}
+        </AtomicText>
+
+        <TouchableOpacity
+          style={styles.headerBtn}
+          onPress={handleSave}
+          accessibilityLabel="Save"
+          accessibilityRole="button"
+        >
+          <AtomicText fontWeight="bold" color="primary">
+            {t("common.save") || "Save"}
+          </AtomicText>
+        </TouchableOpacity>
+      </View>
+
+      {/* Video Preview */}
+      <View style={styles.videoArea}>
+        <VideoPlayer
+          source={videoUri}
+          autoPlay
+          loop
+          nativeControls={false}
+          contentFit="contain"
+          playbackRate={playbackRate}
+          filterOverlay={activeFilter.id !== "none" ? activeFilter : undefined}
+        />
+      </View>
+
+      {/* Toolbar */}
+      <View style={styles.toolbar}>
+        {TOOLS.map((tool) => {
+          const isActive = activeTool === tool.id;
+          return (
+            <TouchableOpacity
+              key={tool.id}
+              style={styles.toolBtn}
+              onPress={() => handleToggleTool(tool.id)}
+              accessibilityLabel={t(tool.labelKey) || tool.id}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isActive }}
+            >
+              <AtomicIcon
+                name={tool.icon}
+                size="md"
+                color={isActive ? "primary" : "textSecondary"}
+              />
+              <AtomicText
+                type="labelSmall"
+                color={isActive ? "primary" : "textSecondary"}
+              >
+                {t(tool.labelKey) || tool.id}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+
+      {/* Filter Bottom Sheet */}
+      <BottomSheetModal ref={filterSheetRef} snapPoints={["40%"]}>
+        <VideoFilterPicker
+          activeFilter={activeFilter}
+          onSelectFilter={setActiveFilter}
+          t={t}
+        />
+      </BottomSheetModal>
+
+      {/* Speed Bottom Sheet */}
+      <BottomSheetModal ref={speedSheetRef} snapPoints={["30%"]}>
+        <SpeedControlPanel
+          playbackRate={playbackRate}
+          onChangeRate={setPlaybackRate}
+          t={t}
+        />
+      </BottomSheetModal>
+    </View>
+  );
+};

package/src/domain/entities/video-project.types.ts

@@ -14,6 +14,21 @@ export interface FilterPreset {
 
 export type LayerType = "text" | "image" | "video" | "shape";
 
+export interface SubtitleStyle {
+  fontSize: "small" | "medium" | "large" | "extraLarge";
+  fontColor: string;
+  backgroundColor: string;
+  position: "top" | "center" | "bottom";
+}
+
+export interface Subtitle {
+  id: string;
+  text: string;
+  startTime: number;
+  endTime: number;
+  style: SubtitleStyle;
+}
+
 export type TransitionType = "fade" | "slide" | "zoom" | "wipe" | "none";
 
 export type AnimationType =

package/src/index.ts

@@ -34,6 +34,8 @@ export type {
   AddImageLayerData,
   AddShapeLayerData,
   FilterPreset,
+  SubtitleStyle,
+  Subtitle,
 } from "./domain/entities";
 
 // =============================================================================
@@ -60,6 +62,9 @@ export {
 // PRESENTATION LAYER - Components & Hooks
 // =============================================================================
 
+export { VideoEditor } from "./VideoEditor";
+export type { VideoEditorProps } from "./VideoEditor";
+
 export {
   EditorHeader,
   EditorPreviewArea,
@@ -103,6 +108,10 @@ export { useMenuActions } from "./presentation/hooks/useMenuActions";
 export { useExportActions } from "./presentation/hooks/useExportActions";
 export { useCollageEditor } from "./presentation/hooks/useCollageEditor";
 export type { UseCollageEditorReturn } from "./presentation/hooks/useCollageEditor";
+export { useSubtitleEditor } from "./presentation/hooks/useSubtitleEditor";
+export type { UseSubtitleEditorReturn } from "./presentation/hooks/useSubtitleEditor";
+
+export { generateSRT, formatTimeDisplay, formatTimeDetailed } from "./infrastructure/utils/srt.utils";
 
 // =============================================================================
 // VIDEO PLAYER MODULE

package/src/infrastructure/constants/index.ts

@@ -12,3 +12,4 @@ export * from "./export.constants";
 export * from "./filter.constants";
 export * from "./speed.constants";
 export * from "./collage.constants";
+export * from "./subtitle.constants";

package/src/infrastructure/constants/subtitle.constants.ts

@@ -0,0 +1,34 @@
+/**
+ * Subtitle Constants
+ */
+
+import type { SubtitleStyle } from "../../domain/entities/video-project.types";
+
+export const DEFAULT_SUBTITLE_STYLE: SubtitleStyle = {
+  fontSize: "medium",
+  fontColor: "#FFFFFF",
+  backgroundColor: "rgba(0,0,0,0.6)",
+  position: "bottom",
+};
+
+export const FONT_SIZE_MAP: Record<SubtitleStyle["fontSize"], number> = {
+  small: 14,
+  medium: 18,
+  large: 24,
+  extraLarge: 32,
+};
+
+export const SUBTITLE_FONT_COLORS = [
+  "#FFFFFF",
+  "#FFEB3B",
+  "#00BCD4",
+  "#4CAF50",
+  "#F44336",
+  "#FF9800",
+] as const;
+
+export const SUBTITLE_BG_COLORS = [
+  { label: "None", value: "transparent" },
+  { label: "Dark", value: "rgba(0,0,0,0.6)" },
+  { label: "Gray", value: "rgba(50,50,50,0.8)" },
+] as const;

package/src/infrastructure/utils/srt.utils.ts

@@ -0,0 +1,33 @@
+/**
+ * SRT Subtitle Utilities
+ */
+
+import type { Subtitle } from "../../domain/entities/video-project.types";
+
+function toSrtTime(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  const ms = Math.floor((seconds % 1) * 1000);
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")},${String(ms).padStart(3, "0")}`;
+}
+
+export function generateSRT(subtitles: Subtitle[]): string {
+  const sorted = [...subtitles].sort((a, b) => a.startTime - b.startTime);
+  return sorted
+    .map((sub, index) => `${index + 1}\n${toSrtTime(sub.startTime)} --> ${toSrtTime(sub.endTime)}\n${sub.text}\n`)
+    .join("\n");
+}
+
+export function formatTimeDisplay(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+
+export function formatTimeDetailed(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  const t = Math.floor((seconds % 1) * 10);
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}.${t}`;
+}

package/src/presentation/components/SubtitleListPanel.tsx

@@ -0,0 +1,305 @@
+/**
+ * SubtitleListPanel Component
+ * 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 { 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 type { Subtitle, SubtitleStyle } from "../../domain/entities/video-project.types";
+
+interface SubtitleListPanelProps {
+  subtitles: Subtitle[];
+  currentTime: number;
+  onAdd: (text: string, startTime: number, endTime: number, style: SubtitleStyle) => void;
+  onUpdate: (id: string, patch: Partial<Omit<Subtitle, "id">>) => void;
+  onDelete: (id: string) => void;
+  onSeek: (time: number) => void;
+  t: (key: string) => string;
+}
+
+export const SubtitleListPanel: React.FC<SubtitleListPanelProps> = ({
+  subtitles,
+  currentTime,
+  onAdd,
+  onUpdate,
+  onDelete,
+  onSeek,
+  t,
+}) => {
+  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 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]);
+
+  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>
+
+      {/* List */}
+      <ScrollView contentContainerStyle={{ paddingVertical: tokens.spacing.sm }}>
+        {subtitles.length === 0 ? (
+          <View style={styles.emptyBox}>
+            <AtomicIcon name="video" size="lg" color="textSecondary" />
+            <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>
+            );
+          })
+        )}
+      </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>
+    </View>
+  );
+};

package/src/presentation/components/SubtitleOverlay.tsx

@@ -0,0 +1,58 @@
+/**
+ * SubtitleOverlay Component
+ * Renders the active subtitle on top of the video at the correct position
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { FONT_SIZE_MAP } from "../../infrastructure/constants/subtitle.constants";
+import type { Subtitle } from "../../domain/entities/video-project.types";
+
+interface SubtitleOverlayProps {
+  subtitle: Subtitle | null;
+}
+
+export const SubtitleOverlay: React.FC<SubtitleOverlayProps> = ({ subtitle }) => {
+  if (!subtitle) return null;
+
+  const positionStyle =
+    subtitle.style.position === "top"
+      ? styles.top
+      : subtitle.style.position === "center"
+      ? styles.center
+      : styles.bottom;
+
+  return (
+    <View style={[styles.overlay, positionStyle]} pointerEvents="none">
+      <View style={[styles.bubble, { backgroundColor: subtitle.style.backgroundColor }]}>
+        <AtomicText
+          style={{
+            color: subtitle.style.fontColor,
+            fontSize: FONT_SIZE_MAP[subtitle.style.fontSize],
+            textAlign: "center",
+          }}
+        >
+          {subtitle.text}
+        </AtomicText>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    left: 16,
+    right: 16,
+    alignItems: "center",
+  },
+  top: { top: 16 },
+  center: { top: "40%" },
+  bottom: { bottom: 16 },
+  bubble: {
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+});

package/src/presentation/components/SubtitleStylePicker.tsx

@@ -0,0 +1,189 @@
+/**
+ * SubtitleStylePicker Component
+ * Font size, color, background, position pickers + live preview
+ */
+
+import React, { useMemo } from "react";
+import { View, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import {
+  FONT_SIZE_MAP,
+  SUBTITLE_FONT_COLORS,
+  SUBTITLE_BG_COLORS,
+} from "../../infrastructure/constants/subtitle.constants";
+import type { SubtitleStyle } from "../../domain/entities/video-project.types";
+
+interface SubtitleStylePickerProps {
+  style: SubtitleStyle;
+  previewText: string;
+  onChange: (style: SubtitleStyle) => void;
+  t: (key: string) => string;
+}
+
+const FONT_SIZES: SubtitleStyle["fontSize"][] = ["small", "medium", "large", "extraLarge"];
+const POSITIONS: SubtitleStyle["position"][] = ["top", "center", "bottom"];
+
+export const SubtitleStylePicker: React.FC<SubtitleStylePickerProps> = ({
+  style,
+  previewText,
+  onChange,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(() => StyleSheet.create({
+    section: { marginTop: tokens.spacing.md },
+    sectionLabel: { marginBottom: tokens.spacing.sm },
+    row: { flexDirection: "row", gap: tokens.spacing.sm, flexWrap: "wrap" },
+    optionBtn: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.sm,
+      borderRadius: tokens.borders.radius.md,
+      backgroundColor: tokens.colors.surface,
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+    },
+    optionBtnActive: {
+      backgroundColor: tokens.colors.primaryContainer,
+      borderColor: tokens.colors.primary,
+    },
+    colorRow: { flexDirection: "row", gap: tokens.spacing.sm },
+    colorBtn: {
+      width: 36,
+      height: 36,
+      borderRadius: 18,
+      borderWidth: 2,
+      borderColor: "transparent",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    colorBtnActive: {
+      borderColor: tokens.colors.primary,
+    },
+    previewBox: {
+      height: 72,
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderRadius: tokens.borders.radius.md,
+      marginTop: tokens.spacing.md,
+      justifyContent: "center",
+      alignItems: "center",
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+      overflow: "hidden",
+    },
+    previewBubble: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.xs,
+      borderRadius: tokens.borders.radius.sm,
+    },
+  }), [tokens]);
+
+  const update = (patch: Partial<SubtitleStyle>) => onChange({ ...style, ...patch });
+
+  return (
+    <View>
+      {/* Font size */}
+      <View style={styles.section}>
+        <AtomicText type="labelSmall" color="textSecondary" style={styles.sectionLabel}>
+          {t("subtitle.style.fontSize") || "Size"}
+        </AtomicText>
+        <View style={styles.row}>
+          {FONT_SIZES.map((size) => (
+            <TouchableOpacity
+              key={size}
+              style={[styles.optionBtn, style.fontSize === size && styles.optionBtnActive]}
+              onPress={() => update({ fontSize: size })}
+              accessibilityRole="button"
+            >
+              <AtomicText
+                type="labelSmall"
+                color={style.fontSize === size ? "primary" : "textSecondary"}
+              >
+                {size}
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+
+      {/* Font color */}
+      <View style={styles.section}>
+        <AtomicText type="labelSmall" color="textSecondary" style={styles.sectionLabel}>
+          {t("subtitle.style.fontColor") || "Color"}
+        </AtomicText>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View style={styles.colorRow}>
+            {SUBTITLE_FONT_COLORS.map((color) => (
+              <TouchableOpacity
+                key={color}
+                style={[styles.colorBtn, { backgroundColor: color }, style.fontColor === color && styles.colorBtnActive]}
+                onPress={() => update({ fontColor: color })}
+                accessibilityRole="button"
+              />
+            ))}
+          </View>
+        </ScrollView>
+      </View>
+
+      {/* Background */}
+      <View style={styles.section}>
+        <AtomicText type="labelSmall" color="textSecondary" style={styles.sectionLabel}>
+          {t("subtitle.style.background") || "Background"}
+        </AtomicText>
+        <View style={styles.row}>
+          {SUBTITLE_BG_COLORS.map((bg) => (
+            <TouchableOpacity
+              key={bg.value}
+              style={[styles.optionBtn, style.backgroundColor === bg.value && styles.optionBtnActive]}
+              onPress={() => update({ backgroundColor: bg.value })}
+              accessibilityRole="button"
+            >
+              <AtomicText
+                type="labelSmall"
+                color={style.backgroundColor === bg.value ? "primary" : "textSecondary"}
+              >
+                {bg.label}
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+
+      {/* Position */}
+      <View style={styles.section}>
+        <AtomicText type="labelSmall" color="textSecondary" style={styles.sectionLabel}>
+          {t("subtitle.style.position") || "Position"}
+        </AtomicText>
+        <View style={styles.row}>
+          {POSITIONS.map((pos) => (
+            <TouchableOpacity
+              key={pos}
+              style={[styles.optionBtn, style.position === pos && styles.optionBtnActive]}
+              onPress={() => update({ position: pos })}
+              accessibilityRole="button"
+            >
+              <AtomicText
+                type="labelSmall"
+                color={style.position === pos ? "primary" : "textSecondary"}
+              >
+                {pos}
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+
+      {/* Preview */}
+      <View style={styles.previewBox}>
+        <View style={[styles.previewBubble, { backgroundColor: style.backgroundColor }]}>
+          <AtomicText
+            style={{ color: style.fontColor, fontSize: FONT_SIZE_MAP[style.fontSize] * 0.75, textAlign: "center" }}
+          >
+            {previewText || t("subtitle.preview.placeholder") || "Preview text"}
+          </AtomicText>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/presentation/components/SubtitleTimeInput.tsx

@@ -0,0 +1,89 @@
+/**
+ * SubtitleTimeInput Component
+ * Coarse (+/-1s) and fine (+/-0.1s, +/-5s) time adjustment
+ */
+
+import React, { useMemo } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { formatTimeDetailed } from "../../infrastructure/utils/srt.utils";
+
+interface SubtitleTimeInputProps {
+  label: string;
+  value: number;
+  onChange: (v: number) => void;
+}
+
+export const SubtitleTimeInput: React.FC<SubtitleTimeInputProps> = ({ label, value, onChange }) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(() => StyleSheet.create({
+    container: { flex: 1 },
+    label: { marginBottom: tokens.spacing.xs },
+    row: { flexDirection: "row", alignItems: "center", gap: tokens.spacing.xs },
+    adjustBtn: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      backgroundColor: tokens.colors.surfaceVariant,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    display: {
+      flex: 1,
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.md,
+      paddingVertical: tokens.spacing.sm,
+      alignItems: "center",
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+    },
+    fineRow: {
+      flexDirection: "row",
+      gap: tokens.spacing.xs,
+      marginTop: tokens.spacing.xs,
+      flexWrap: "wrap",
+    },
+    fineBtn: {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.sm,
+      paddingHorizontal: tokens.spacing.sm,
+      paddingVertical: tokens.spacing.xs,
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+    },
+  }), [tokens]);
+
+  const adjust = (delta: number) => onChange(Math.max(0, value + delta));
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="labelSmall" color="textSecondary" style={styles.label}>
+        {label}
+      </AtomicText>
+      <View style={styles.row}>
+        <TouchableOpacity style={styles.adjustBtn} onPress={() => adjust(-1)} accessibilityRole="button">
+          <AtomicText fontWeight="bold" color="textPrimary">−</AtomicText>
+        </TouchableOpacity>
+        <View style={styles.display}>
+          <AtomicText fontWeight="semibold" color="textPrimary">
+            {formatTimeDetailed(value)}
+          </AtomicText>
+        </View>
+        <TouchableOpacity style={styles.adjustBtn} onPress={() => adjust(1)} accessibilityRole="button">
+          <AtomicText fontWeight="bold" color="textPrimary">+</AtomicText>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.fineRow}>
+        {([-5, -0.1, 0.1, 5] as const).map((delta) => (
+          <TouchableOpacity key={delta} style={styles.fineBtn} onPress={() => adjust(delta)} accessibilityRole="button">
+            <AtomicText type="labelSmall" color="textSecondary">
+              {delta > 0 ? `+${delta}s` : `${delta}s`}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};

package/src/presentation/components/index.ts

@@ -18,3 +18,7 @@ export * from "./ExportDialog";
 export * from "./SpeedControlPanel";
 export * from "./VideoFilterPicker";
 export * from "./CollageEditorCanvas";
+export * from "./SubtitleTimeInput";
+export * from "./SubtitleStylePicker";
+export * from "./SubtitleOverlay";
+export * from "./SubtitleListPanel";

package/src/presentation/hooks/useSubtitleEditor.ts

@@ -0,0 +1,71 @@
+/**
+ * useSubtitleEditor Hook
+ * CRUD state management for subtitles
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import type { Subtitle, SubtitleStyle } from "../../domain/entities/video-project.types";
+import { DEFAULT_SUBTITLE_STYLE } from "../../infrastructure/constants/subtitle.constants";
+import { generateSRT } from "../../infrastructure/utils/srt.utils";
+
+function generateId(): string {
+  return `sub_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+}
+
+export interface UseSubtitleEditorReturn {
+  subtitles: Subtitle[];
+  addSubtitle: (text: string, startTime: number, endTime: number, style?: SubtitleStyle) => void;
+  updateSubtitle: (id: string, patch: Partial<Omit<Subtitle, "id">>) => void;
+  deleteSubtitle: (id: string) => void;
+  clearSubtitles: () => void;
+  getActiveSubtitle: (currentTime: number) => Subtitle | null;
+  exportSRT: () => string;
+  setSubtitles: (subtitles: Subtitle[]) => void;
+}
+
+export function useSubtitleEditor(initial: Subtitle[] = []): UseSubtitleEditorReturn {
+  const [subtitles, setSubtitles] = useState<Subtitle[]>(initial);
+
+  const addSubtitle = useCallback((
+    text: string,
+    startTime: number,
+    endTime: number,
+    style: SubtitleStyle = { ...DEFAULT_SUBTITLE_STYLE },
+  ) => {
+    const newSub: Subtitle = { id: generateId(), text, startTime, endTime, style };
+    setSubtitles((prev) => [...prev, newSub].sort((a, b) => a.startTime - b.startTime));
+  }, []);
+
+  const updateSubtitle = useCallback((id: string, patch: Partial<Omit<Subtitle, "id">>) => {
+    setSubtitles((prev) =>
+      prev
+        .map((s) => (s.id === id ? { ...s, ...patch } : s))
+        .sort((a, b) => a.startTime - b.startTime),
+    );
+  }, []);
+
+  const deleteSubtitle = useCallback((id: string) => {
+    setSubtitles((prev) => prev.filter((s) => s.id !== id));
+  }, []);
+
+  const clearSubtitles = useCallback(() => setSubtitles([]), []);
+
+  const getActiveSubtitle = useCallback(
+    (currentTime: number): Subtitle | null =>
+      subtitles.find((s) => currentTime >= s.startTime && currentTime <= s.endTime) ?? null,
+    [subtitles],
+  );
+
+  const exportSRT = useCallback((): string => generateSRT(subtitles), [subtitles]);
+
+  return useMemo(() => ({
+    subtitles,
+    addSubtitle,
+    updateSubtitle,
+    deleteSubtitle,
+    clearSubtitles,
+    getActiveSubtitle,
+    exportSRT,
+    setSubtitles,
+  }), [subtitles, addSubtitle, updateSubtitle, deleteSubtitle, clearSubtitles, getActiveSubtitle, exportSRT]);
+}