@umituz/react-native-video-editor 1.1.53 → 1.1.55

package/src/presentation/components/DraggableLayer.tsx

@@ -3,7 +3,7 @@
  * Draggable and resizable layer component
  */
 
-import React from "react";
+import React, { useMemo, useCallback } from "react";
 import { View, StyleSheet } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -11,6 +11,7 @@ import type { Layer } from "../../domain/entities/video-project.types";
 import { useDraggableLayerGestures } from "../hooks/useDraggableLayerGestures";
 import { LayerContent } from "./draggable-layer/LayerContent";
 import { ResizeHandles } from "./draggable-layer/ResizeHandles";
+import { percentageToPixels } from "../../infrastructure/utils/position-calculations.utils";
 
 interface DraggableLayerProps {
   layer: Layer;
@@ -22,7 +23,7 @@ interface DraggableLayerProps {
   onSizeChange: (width: number, height: number) => void;
 }
 
-export const DraggableLayer: React.FC<DraggableLayerProps> = ({
+export const DraggableLayer: React.FC<DraggableLayerProps> = React.memo(({
   layer,
   canvasWidth,
   canvasHeight,
@@ -36,10 +37,23 @@ export const DraggableLayer: React.FC<DraggableLayerProps> = ({
   const safeCanvasWidth = canvasWidth > 0 ? canvasWidth : 1;
   const safeCanvasHeight = canvasHeight > 0 ? canvasHeight : 1;
 
-  const initialX = (layer.position.x / 100) * safeCanvasWidth;
-  const initialY = (layer.position.y / 100) * safeCanvasHeight;
-  const initialWidth = (layer.size.width / 100) * safeCanvasWidth;
-  const initialHeight = (layer.size.height / 100) * safeCanvasHeight;
+  const initialX = percentageToPixels(layer.position.x, safeCanvasWidth);
+  const initialY = percentageToPixels(layer.position.y, safeCanvasHeight);
+  const initialWidth = percentageToPixels(layer.size.width, safeCanvasWidth);
+  const initialHeight = percentageToPixels(layer.size.height, safeCanvasHeight);
+
+  // Stable callbacks to prevent gesture re-creation
+  const handlePositionChange = useCallback((x: number, y: number) => {
+    onPositionChange(x, y);
+  }, [onPositionChange]);
+
+  const handleSizeChange = useCallback((width: number, height: number) => {
+    onSizeChange(width, height);
+  }, [onSizeChange]);
+
+  const handleSelect = useCallback(() => {
+    onSelect();
+  }, [onSelect]);
 
   const {
     state,
@@ -55,12 +69,13 @@ export const DraggableLayer: React.FC<DraggableLayerProps> = ({
     initialHeight,
     canvasWidth: safeCanvasWidth,
     canvasHeight: safeCanvasHeight,
-    onSelect,
-    onPositionChange,
-    onSizeChange,
+    onSelect: handleSelect,
+    onPositionChange: handlePositionChange,
+    onSizeChange: handleSizeChange,
   });
 
-  const layerStyle = {
+  // Memoize layer style to prevent new object on every render
+  const layerStyle = useMemo(() => ({
     transform: [
       { translateX: state.x },
       { translateY: state.y },
@@ -69,17 +84,20 @@ export const DraggableLayer: React.FC<DraggableLayerProps> = ({
     opacity: layer.opacity,
     width: state.width,
     height: state.height,
-  };
+  }), [state.x, state.y, state.width, state.height, layer.rotation, layer.opacity]);
+
+  // Memoize border style
+  const borderStyle = useMemo(() => ({
+    borderColor: isSelected ? tokens.colors.primary : "transparent",
+    borderWidth: isSelected ? 2 : 0,
+  }), [isSelected, tokens.colors.primary]);
 
   return (
     <GestureDetector gesture={composedGesture}>
       <View
         style={[
           styles.layer,
-          {
-            borderColor: isSelected ? tokens.colors.primary : "transparent",
-            borderWidth: isSelected ? 2 : 0,
-          },
+          borderStyle,
           layerStyle,
         ]}
       >
@@ -96,7 +114,9 @@ export const DraggableLayer: React.FC<DraggableLayerProps> = ({
       </View>
     </GestureDetector>
   );
-};
+});
+
+DraggableLayer.displayName = 'DraggableLayer';
 
 const styles = StyleSheet.create({
   layer: {

package/src/presentation/components/EditorPreviewArea.tsx

@@ -1,15 +1,17 @@
 /**
  * Editor Preview Area Component
  * Single Responsibility: Display video preview canvas and playback controls
+ * Optimized to prevent unnecessary re-renders
  */
 
-import React, { useMemo } from "react";
+import React, { useMemo, useCallback } from "react";
 import { View, TouchableOpacity, Dimensions } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { DraggableLayer } from "./DraggableLayer";
 import type { Scene, Layer } from "../../domain/entities/video-project.types";
 import { createPreviewStyles } from "./EditorPreviewArea.styles";
+import { formatTimeDisplay, calculateProgressPercent } from "../../infrastructure/utils/time-calculations.utils";
 
 const { width } = Dimensions.get("window");
 const PREVIEW_ASPECT_RATIO = 16 / 9;
@@ -28,7 +30,7 @@ interface EditorPreviewAreaProps {
   onReset: () => void;
 }
 
-export const EditorPreviewArea: React.FC<EditorPreviewAreaProps> = ({
+export const EditorPreviewArea: React.FC<EditorPreviewAreaProps> = React.memo(({
   scene,
   selectedLayerId,
   isPlaying,
@@ -43,26 +45,88 @@ export const EditorPreviewArea: React.FC<EditorPreviewAreaProps> = ({
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => createPreviewStyles(tokens), [tokens]);
 
+  // Memoize canvas style
+  const canvasStyle = useMemo(() => [
+    styles.previewCanvas,
+    {
+      backgroundColor:
+        scene.background.type === "color"
+          ? scene.background.value
+          : tokens.colors.surfaceSecondary,
+      height: PREVIEW_HEIGHT,
+    },
+  ], [styles.previewCanvas, scene.background.type, scene.background.value, tokens.colors.surfaceSecondary]);
+
+  // Memoize empty preview text style
+  const emptyTextStyle = useMemo(() => ({
+    color: tokens.colors.textSecondary,
+    marginTop: 12,
+  }), [tokens.colors.textSecondary]);
+
+  // Memoize layer actions button style
+  const layerActionsButtonStyle = useMemo(() => [
+    styles.layerActionsButton,
+    { backgroundColor: tokens.colors.primary },
+  ], [styles.layerActionsButton, tokens.colors.primary]);
+
+  // Stable callbacks for layer operations
+  const handleLayerSelect = useCallback((layerId: string) => {
+    onLayerSelect(layerId);
+  }, [onLayerSelect]);
+
+  const createLayerPositionHandler = useCallback((layerId: string) => {
+    return (x: number, y: number) => {
+      onLayerPositionChange(layerId, x, y);
+    };
+  }, [onLayerPositionChange]);
+
+  const createLayerSizeHandler = useCallback((layerId: string) => {
+    return (width: number, height: number) => {
+      onLayerSizeChange(layerId, width, height);
+    };
+  }, [onLayerSizeChange]);
+
+  // Stable callback for layer actions button
+  const handleLayerActionsPress = useCallback(() => {
+    const layer = scene.layers.find((l) => l.id === selectedLayerId);
+    if (layer) {
+      onLayerActionsPress(layer);
+    }
+  }, [scene.layers, selectedLayerId, onLayerActionsPress]);
+
+  // Memoize playback controls style
+  const playbackControlsStyle = useMemo(() => [
+    styles.playbackControls,
+    { backgroundColor: tokens.colors.surface },
+  ], [styles.playbackControls, tokens.colors.surface]);
+
+  // Memoize progress bar container style
+  const progressBarContainerStyle = useMemo(() => [
+    styles.progressBarContainer,
+    { backgroundColor: tokens.colors.borderLight },
+  ], [styles.progressBarContainer, tokens.colors.borderLight]);
+
+  // Memoize progress bar style
+  const progressBarStyle = useMemo(() => ({
+    ...styles.progressBar,
+    width: `${calculateProgressPercent(currentTime, scene.duration)}%` as any,
+    backgroundColor: tokens.colors.primary,
+  }), [styles.progressBar, currentTime, scene.duration, tokens.colors.primary]);
+
+  // Memoize time text style
+  const timeTextStyle = useMemo(() => ({
+    color: tokens.colors.textSecondary,
+  }), [tokens.colors.textSecondary]);
+
   return (
     <View style={styles.previewSection}>
-      <View
-        style={[
-          styles.previewCanvas,
-          {
-            backgroundColor:
-              scene.background.type === "color"
-                ? scene.background.value
-                : tokens.colors.surfaceSecondary,
-            height: PREVIEW_HEIGHT,
-          },
-        ]}
-      >
+      <View style={canvasStyle}>
         {scene.layers.length === 0 ? (
           <View style={styles.emptyPreview}>
             <AtomicIcon name="film-outline" size="xl" color="secondary" />
             <AtomicText
               type="bodyMedium"
-              style={{ color: tokens.colors.textSecondary, marginTop: 12 }}
+              style={emptyTextStyle}
             >
               Canvas is empty. Add layers to get started.
             </AtomicText>
@@ -76,28 +140,16 @@ export const EditorPreviewArea: React.FC<EditorPreviewAreaProps> = ({
                 canvasWidth={width}
                 canvasHeight={PREVIEW_HEIGHT}
                 isSelected={selectedLayerId === layer.id}
-                onSelect={() => onLayerSelect(layer.id)}
-                onPositionChange={(x, y) =>
-                  onLayerPositionChange(layer.id, x, y)
-                }
-                onSizeChange={(w, h) => onLayerSizeChange(layer.id, w, h)}
+                onSelect={() => handleLayerSelect(layer.id)}
+                onPositionChange={createLayerPositionHandler(layer.id)}
+                onSizeChange={createLayerSizeHandler(layer.id)}
               />
             ))}
 
             {selectedLayerId && (
               <TouchableOpacity
-                style={[
-                  styles.layerActionsButton,
-                  { backgroundColor: tokens.colors.primary },
-                ]}
-                onPress={() => {
-                  const layer = scene.layers.find(
-                    (l) => l.id === selectedLayerId,
-                  );
-                  if (layer) {
-                    onLayerActionsPress(layer);
-                  }
-                }}
+                style={layerActionsButtonStyle}
+                onPress={handleLayerActionsPress}
               >
                 <AtomicIcon
                   name="ellipsis-vertical"
@@ -110,12 +162,7 @@ export const EditorPreviewArea: React.FC<EditorPreviewAreaProps> = ({
         )}
       </View>
 
-      <View
-        style={[
-          styles.playbackControls,
-          { backgroundColor: tokens.colors.surface },
-        ]}
-      >
+      <View style={playbackControlsStyle}>
         <View style={styles.playbackRow}>
           <TouchableOpacity onPress={onPlayPause} style={styles.playButton}>
             <AtomicIcon
@@ -128,10 +175,9 @@ export const EditorPreviewArea: React.FC<EditorPreviewAreaProps> = ({
           <View style={styles.timeDisplay}>
             <AtomicText
               type="labelSmall"
-              style={{ color: tokens.colors.textSecondary }}
+              style={timeTextStyle}
             >
-              {Math.floor(currentTime / 1000)}s /{" "}
-              {Math.floor(scene.duration / 1000)}s
+              {formatTimeDisplay(currentTime, true)} / {formatTimeDisplay(scene.duration, true)}
             </AtomicText>
           </View>
 
@@ -140,23 +186,12 @@ export const EditorPreviewArea: React.FC<EditorPreviewAreaProps> = ({
           </TouchableOpacity>
         </View>
 
-        <View
-          style={[
-            styles.progressBarContainer,
-            { backgroundColor: tokens.colors.borderLight },
-          ]}
-        >
-          <View
-            style={[
-              styles.progressBar,
-              {
-                width: `${(currentTime / scene.duration) * 100}%`,
-                backgroundColor: tokens.colors.primary,
-              },
-            ]}
-          />
+        <View style={progressBarContainerStyle}>
+          <View style={progressBarStyle} />
         </View>
       </View>
     </View>
   );
-};
+});
+
+EditorPreviewArea.displayName = 'EditorPreviewArea';

package/src/presentation/components/EditorTimeline.tsx

@@ -3,7 +3,7 @@
  * Single Responsibility: Display scene timeline
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -18,6 +18,84 @@ interface EditorTimelineProps {
   onAddScene: () => void;
 }
 
+interface SceneCardProps {
+  scene: Scene;
+  index: number;
+  isSelected: boolean;
+  onSelect: (index: number) => void;
+  onLongPress: (index: number) => void;
+  primaryColor: string;
+  backgroundColor: string;
+  borderLightColor: string;
+  surfaceSecondaryColor: string;
+  onPrimaryColor: string;
+  textPrimaryColor: string;
+}
+
+/**
+ * Memoized SceneCard component to prevent unnecessary re-renders
+ * Only re-renders when its own props change, not when other scenes change
+ */
+const SceneCard = React.memo<SceneCardProps>(({
+  scene,
+  index,
+  isSelected,
+  onSelect,
+  onLongPress,
+  primaryColor,
+  backgroundColor,
+  borderLightColor,
+  surfaceSecondaryColor,
+  onPrimaryColor,
+  textPrimaryColor,
+}) => {
+  const cardStyle = useMemo(() => [
+    styles.sceneCard,
+    {
+      backgroundColor: isSelected ? `${primaryColor}20` : backgroundColor,
+      borderColor: isSelected ? primaryColor : borderLightColor,
+    },
+  ], [isSelected, primaryColor, backgroundColor, borderLightColor]);
+
+  const thumbnailStyle = useMemo(() => [
+    styles.sceneThumbnail,
+    {
+      backgroundColor: scene.background.value || surfaceSecondaryColor,
+    },
+  ], [scene.background.value, surfaceSecondaryColor]);
+
+  const textStyle = useMemo(() => ({
+    color: textPrimaryColor,
+    marginTop: 4,
+    fontWeight: isSelected ? "600" as const : "400" as const,
+  }), [isSelected, textPrimaryColor]);
+
+  return (
+    <TouchableOpacity
+      style={cardStyle}
+      onPress={() => onSelect(index)}
+      onLongPress={() => onLongPress(index)}
+    >
+      <View style={thumbnailStyle}>
+        <AtomicText
+          type="labelSmall"
+          style={{ color: onPrimaryColor, fontWeight: "600" }}
+        >
+          {index + 1}
+        </AtomicText>
+      </View>
+      <AtomicText
+        type="labelSmall"
+        style={textStyle}
+      >
+        {scene.duration / 1000}s
+      </AtomicText>
+    </TouchableOpacity>
+  );
+});
+
+SceneCard.displayName = 'SceneCard';
+
 export const EditorTimeline: React.FC<EditorTimelineProps> = ({
   project,
   currentSceneIndex,
@@ -28,12 +106,23 @@ export const EditorTimeline: React.FC<EditorTimelineProps> = ({
   const { t } = useLocalization();
   const tokens = useAppDesignTokens();
 
+  // Memoize styles that don't change
+  const containerStyle = useMemo(() => [
+    styles.timeline,
+    { backgroundColor: tokens.colors.surface }
+  ], [tokens.colors.surface]);
+
+  const headerTextStyle = useMemo(() => ({
+    color: tokens.colors.textPrimary,
+    fontWeight: "600" as const,
+  }), [tokens.colors.textPrimary]);
+
   return (
-    <View style={[styles.timeline, { backgroundColor: tokens.colors.surface }]}>
+    <View style={containerStyle}>
       <View style={styles.timelineHeader}>
         <AtomicText
           type="bodyMedium"
-          style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+          style={headerTextStyle}
         >
           {t("editor.timeline.title")}
         </AtomicText>
@@ -48,51 +137,20 @@ export const EditorTimeline: React.FC<EditorTimelineProps> = ({
         style={styles.scenesScroll}
       >
         {project.scenes.map((scene: Scene, index: number) => (
-          <TouchableOpacity
+          <SceneCard
             key={scene.id}
-            style={[
-              styles.sceneCard,
-              {
-                backgroundColor:
-                  currentSceneIndex === index
-                    ? tokens.colors.primary + "20"
-                    : tokens.colors.backgroundPrimary,
-                borderColor:
-                  currentSceneIndex === index
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-              },
-            ]}
-            onPress={() => onSceneSelect(index)}
-            onLongPress={() => onSceneLongPress(index)}
-          >
-            <View
-              style={[
-                styles.sceneThumbnail,
-                {
-                  backgroundColor:
-                    scene.background.value || tokens.colors.surfaceSecondary,
-                },
-              ]}
-            >
-              <AtomicText
-                type="labelSmall"
-                style={{ color: tokens.colors.onPrimary, fontWeight: "600" }}
-              >
-                {index + 1}
-              </AtomicText>
-            </View>
-            <AtomicText
-              type="labelSmall"
-              style={{
-                color: tokens.colors.textPrimary,
-                marginTop: 4,
-                fontWeight: currentSceneIndex === index ? "600" : "400",
-              }}
-            >
-              {scene.duration / 1000}s
-            </AtomicText>
-          </TouchableOpacity>
+            scene={scene}
+            index={index}
+            isSelected={currentSceneIndex === index}
+            onSelect={onSceneSelect}
+            onLongPress={onSceneLongPress}
+            primaryColor={tokens.colors.primary}
+            backgroundColor={tokens.colors.backgroundPrimary}
+            borderLightColor={tokens.colors.borderLight}
+            surfaceSecondaryColor={tokens.colors.surfaceSecondary}
+            onPrimaryColor={tokens.colors.onPrimary}
+            textPrimaryColor={tokens.colors.textPrimary}
+          />
         ))}
       </ScrollView>
     </View>