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

package/src/presentation/components/LayerActionsMenu.tsx

@@ -1,12 +1,11 @@
 /**
  * Layer Actions Menu Component
  * Single Responsibility: Display layer action menu
+ * REFACTORED: Now uses generic ActionMenu component (89 lines)
  */
 
-import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import React, { useMemo, useCallback } from "react";
+import { ActionMenu, type ActionMenuItem } from "./generic/ActionMenu";
 import { useLocalization } from "@umituz/react-native-settings";
 import type { Layer } from "../../domain/entities/video-project.types";
 
@@ -35,167 +34,106 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
   onMoveBack,
   onDelete,
 }) => {
-  const tokens = useAppDesignTokens();
   const { t } = useLocalization();
 
-  return (
-    <View style={{ paddingVertical: 8 }}>
-      {layer.type === "text" && (
-        <TouchableOpacity style={styles.actionMenuItem} onPress={onEditText}>
-          <AtomicIcon name="create-outline" size="md" color="primary" />
-          <AtomicText
-            type="bodyMedium"
-            style={{
-              color: tokens.colors.textPrimary,
-              marginLeft: 12,
-            }}
-          >
-            {t("editor.layers.actions.editText")}
-          </AtomicText>
-        </TouchableOpacity>
-      )}
-      {layer.type === "image" && (
-        <TouchableOpacity style={styles.actionMenuItem} onPress={onEditImage}>
-          <AtomicIcon name="create-outline" size="md" color="primary" />
-          <AtomicText
-            type="bodyMedium"
-            style={{
-              color: tokens.colors.textPrimary,
-              marginLeft: 12,
-            }}
-          >
-            {t("editor.layers.actions.editImage")}
-          </AtomicText>
-        </TouchableOpacity>
-      )}
+  // Build menu items based on layer type
+  const menuItems = useMemo<ActionMenuItem[]>(() => {
+    const items: ActionMenuItem[] = [];
 
-      <TouchableOpacity style={styles.actionMenuItem} onPress={onAnimate}>
-        <AtomicIcon name="sparkles-outline" size="md" color="primary" />
-        <AtomicText
-          type="bodyMedium"
-          style={{
-            color: tokens.colors.textPrimary,
-            marginLeft: 12,
-          }}
-        >
-          {layer.animation
-            ? t("editor.layers.actions.editAnimation")
-            : t("editor.layers.actions.addAnimation")}
-        </AtomicText>
-        {layer.animation && (
-          <View
-            style={[
-              styles.animationBadge,
-              { backgroundColor: tokens.colors.success },
-            ]}
-          />
-        )}
-      </TouchableOpacity>
+    // Type-specific actions
+    if (layer.type === "text") {
+      items.push({
+        id: "edit-text",
+        label: t("editor.layers.actions.editText") || "Edit Text",
+        icon: "create-outline",
+      });
+    }
 
-      <TouchableOpacity style={styles.actionMenuItem} onPress={onDuplicate}>
-        <AtomicIcon name="copy" size="md" color="primary" />
-        <AtomicText
-          type="bodyMedium"
-          style={{
-            color: tokens.colors.textPrimary,
-            marginLeft: 12,
-          }}
-        >
-          {t("editor.layers.actions.duplicate")}
-        </AtomicText>
-      </TouchableOpacity>
+    if (layer.type === "image") {
+      items.push({
+        id: "edit-image",
+        label: t("editor.layers.actions.editImage") || "Edit Image",
+        icon: "create-outline",
+      });
+    }
 
-      <View
-        style={[styles.divider, { backgroundColor: tokens.colors.border }]}
-      />
+    // Common actions
+    items.push(
+      {
+        id: "animate",
+        label: layer.animation
+          ? (t("editor.layers.actions.editAnimation") || "Edit Animation")
+          : (t("editor.layers.actions.addAnimation") || "Add Animation"),
+        icon: "sparkles-outline",
+      },
+      {
+        id: "duplicate",
+        label: t("editor.layers.actions.duplicate") || "Duplicate",
+        icon: "copy",
+      },
+      {
+        id: "move-front",
+        label: t("editor.layers.actions.moveFront") || "Bring to Front",
+        icon: "flip-to-front",
+      },
+      {
+        id: "move-up",
+        label: t("editor.layers.actions.moveUp") || "Move Forward",
+        icon: "arrow-upward",
+      },
+      {
+        id: "move-down",
+        label: t("editor.layers.actions.moveDown") || "Move Backward",
+        icon: "arrow-downward",
+      },
+      {
+        id: "move-back",
+        label: t("editor.layers.actions.moveBack") || "Send to Back",
+        icon: "flip-to-back",
+      },
+      {
+        id: "delete",
+        label: t("editor.layers.actions.delete") || "Delete",
+        icon: "delete",
+        destructive: true,
+      },
+    );
 
-      <TouchableOpacity style={styles.actionMenuItem} onPress={onMoveFront}>
-        <AtomicIcon name="chevron-up-outline" size="md" color="secondary" />
-        <AtomicText
-          type="bodyMedium"
-          style={{
-            color: tokens.colors.textSecondary,
-            marginLeft: 12,
-          }}
-        >
-          {t("editor.layers.actions.bringToFront")}
-        </AtomicText>
-      </TouchableOpacity>
+    return items;
+  }, [layer, t]);
 
-      <TouchableOpacity style={styles.actionMenuItem} onPress={onMoveUp}>
-        <AtomicIcon name="chevron-up-outline" size="md" color="secondary" />
-        <AtomicText
-          type="bodyMedium"
-          style={{
-            color: tokens.colors.textSecondary,
-            marginLeft: 12,
-          }}
-        >
-          {t("editor.layers.actions.moveUp")}
-        </AtomicText>
-      </TouchableOpacity>
+  // Handle action selection
+  const handleSelect = useCallback((actionId: string) => {
+    switch (actionId) {
+      case "edit-text":
+        onEditText();
+        break;
+      case "edit-image":
+        onEditImage();
+        break;
+      case "animate":
+        onAnimate();
+        break;
+      case "duplicate":
+        onDuplicate();
+        break;
+      case "move-front":
+        onMoveFront();
+        break;
+      case "move-up":
+        onMoveUp();
+        break;
+      case "move-down":
+        onMoveDown();
+        break;
+      case "move-back":
+        onMoveBack();
+        break;
+      case "delete":
+        onDelete();
+        break;
+    }
+  }, [onEditText, onEditImage, onAnimate, onDuplicate, onMoveFront, onMoveUp, onMoveDown, onMoveBack, onDelete]);
 
-      <TouchableOpacity style={styles.actionMenuItem} onPress={onMoveDown}>
-        <AtomicIcon name="chevron-down" size="md" color="secondary" />
-        <AtomicText
-          type="bodyMedium"
-          style={{
-            color: tokens.colors.textSecondary,
-            marginLeft: 12,
-          }}
-        >
-          {t("editor.layers.actions.moveDown")}
-        </AtomicText>
-      </TouchableOpacity>
-
-      <TouchableOpacity style={styles.actionMenuItem} onPress={onMoveBack}>
-        <AtomicIcon name="chevron-down-outline" size="md" color="secondary" />
-        <AtomicText
-          type="bodyMedium"
-          style={{
-            color: tokens.colors.textSecondary,
-            marginLeft: 12,
-          }}
-        >
-          {t("editor.layers.actions.sendToBack")}
-        </AtomicText>
-      </TouchableOpacity>
-
-      <View
-        style={[styles.divider, { backgroundColor: tokens.colors.border }]}
-      />
-
-      <TouchableOpacity style={styles.actionMenuItem} onPress={onDelete}>
-        <AtomicIcon name="trash-outline" size="md" color="error" />
-        <AtomicText
-          type="bodyMedium"
-          style={{
-            color: tokens.colors.error,
-            marginLeft: 12,
-          }}
-        >
-          {t("editor.layers.actions.delete")}
-        </AtomicText>
-      </TouchableOpacity>
-    </View>
-  );
+  return <ActionMenu actions={menuItems} onSelect={handleSelect} testID="layer-actions-menu" />;
 };
-
-const styles = StyleSheet.create({
-  actionMenuItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-  },
-  divider: {
-    height: 1,
-    marginVertical: 8,
-  },
-  animationBadge: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    marginLeft: 8,
-  },
-});

package/src/presentation/components/SceneActionsMenu.tsx

@@ -1,12 +1,11 @@
 /**
  * Scene Actions Menu Component
  * Single Responsibility: Display scene action menu
+ * REFACTORED: Uses generic ActionMenu component (40 lines)
  */
 
-import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import React, { useMemo, useCallback } from "react";
+import { ActionMenu, type ActionMenuItem } from "./generic/ActionMenu";
 
 interface SceneActionsMenuProps {
   sceneIndex: number;
@@ -21,46 +20,37 @@ export const SceneActionsMenu: React.FC<SceneActionsMenuProps> = ({
   onDuplicate,
   onDelete,
 }) => {
-  const tokens = useAppDesignTokens();
+  const menuItems = useMemo<ActionMenuItem[]>(() => {
+    const items: ActionMenuItem[] = [
+      {
+        id: "duplicate",
+        label: "Duplicate Scene",
+        icon: "copy",
+      },
+    ];
 
-  return (
-    <View style={{ paddingVertical: 8 }}>
-      <TouchableOpacity style={styles.actionMenuItem} onPress={onDuplicate}>
-        <AtomicIcon name="copy" size="md" color="primary" />
-        <AtomicText
-          type="bodyMedium"
-          style={{
-            color: tokens.colors.textPrimary,
-            marginLeft: 12,
-          }}
-        >
-          Duplicate Scene
-        </AtomicText>
-      </TouchableOpacity>
+    if (canDelete) {
+      items.push({
+        id: "delete",
+        label: "Delete Scene",
+        icon: "delete",
+        destructive: true,
+      });
+    }
 
-      {canDelete && (
-        <TouchableOpacity style={styles.actionMenuItem} onPress={onDelete}>
-          <AtomicIcon name="trash-outline" size="md" color="error" />
-          <AtomicText
-            type="bodyMedium"
-            style={{
-              color: tokens.colors.error,
-              marginLeft: 12,
-            }}
-          >
-            Delete Scene
-          </AtomicText>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
+    return items;
+  }, [canDelete]);
+
+  const handleSelect = useCallback((actionId: string) => {
+    switch (actionId) {
+      case "duplicate":
+        onDuplicate();
+        break;
+      case "delete":
+        onDelete();
+        break;
+    }
+  }, [onDuplicate, onDelete]);
 
-const styles = StyleSheet.create({
-  actionMenuItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-  },
-});
+  return <ActionMenu actions={menuItems} onSelect={handleSelect} testID="scene-actions-menu" />;
+};

package/src/presentation/components/SubtitleListPanel.tsx

@@ -1,10 +1,11 @@
 /**
  * SubtitleListPanel Component
  * Full subtitle editor panel: list + add/edit modal
+ * PERFORMANCE: Uses FlatList for efficient rendering of large subtitle lists
  */
 
-import React, { useMemo } from "react";
-import { View, ScrollView } from "react-native";
+import React, { useMemo, useCallback } from "react";
+import { View, FlatList } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { SubtitleListHeader } from "./subtitle/SubtitleListHeader";
@@ -40,13 +41,41 @@ export const SubtitleListPanel: React.FC<SubtitleListPanelProps> = ({
     return subtitles.find((s) => currentTime >= s.startTime && currentTime <= s.endTime)?.id ?? null;
   }, [subtitles, currentTime]);
 
-  const emptyStyles = {
+  // Memoize empty styles to prevent recreation
+  const emptyStyles = useMemo(() => ({
     emptyBox: {
       alignItems: "center" as const,
       paddingTop: tokens.spacing.xl,
       gap: tokens.spacing.sm,
     },
-  };
+  }), [tokens.spacing.xl, tokens.spacing.sm]);
+
+  // Stable render item for FlatList - prevents unnecessary re-renders
+  const renderItem = useCallback(({ item }: { item: Subtitle }) => (
+    <SubtitleListItem
+      key={item.id}
+      subtitle={item}
+      isActive={item.id === activeId}
+      onEdit={form.openEdit}
+      onSeek={onSeek}
+    />
+  ), [activeId, form.openEdit, onSeek]);
+
+  // Stable key extractor
+  const keyExtractor = useCallback((item: Subtitle) => item.id, []);
+
+  // List empty component - memoized
+  const ListEmptyComponent = useMemo(() => (
+    <View style={emptyStyles.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>
+  ), [emptyStyles.emptyBox, t]);
 
   return (
     <View style={{ flex: 1 }}>
@@ -56,29 +85,27 @@ export const SubtitleListPanel: React.FC<SubtitleListPanelProps> = ({
         title={t("subtitle.panel.title") || "Subtitles"}
       />
 
-      <ScrollView contentContainerStyle={{ paddingVertical: tokens.spacing.sm }}>
-        {subtitles.length === 0 ? (
-          <View style={emptyStyles.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((subtitle) => (
-            <SubtitleListItem
-              key={subtitle.id}
-              subtitle={subtitle}
-              isActive={subtitle.id === activeId}
-              onEdit={form.openEdit}
-              onSeek={onSeek}
-            />
-          ))
-        )}
-      </ScrollView>
+      <FlatList
+        data={subtitles}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        ListEmptyComponent={ListEmptyComponent}
+        contentContainerStyle={{
+          paddingVertical: tokens.spacing.sm,
+          flexGrow: 1,
+        }}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={10}
+        updateCellsBatchingPeriod={50}
+        initialNumToRender={10}
+        windowSize={5}
+        // Performance: Prevents layout jumps on Android
+        getItemLayout={(data, index) => ({
+          length: 80, // Approximate height of each item
+          offset: 80 * index,
+          index,
+        })}
+      />
 
       <SubtitleModal
         visible={form.showModal}