@umituz/react-native-video-editor 1.1.54 → 1.1.56

package/src/presentation/components/EditorToolPanel.tsx

@@ -3,7 +3,7 @@
  * Single Responsibility: Display editor tool buttons
  */
 
-import React from "react";
+import React, { useMemo, useCallback } from "react";
 import {
   View,
   ScrollView,
@@ -24,7 +24,70 @@ interface EditorToolPanelProps {
   onSpeed?: () => void;
 }
 
-export const EditorToolPanel: React.FC<EditorToolPanelProps> = ({
+interface ToolButtonProps {
+  icon: string;
+  label: string;
+  onPress: () => void;
+  backgroundColor: string;
+  textColor: string;
+  showBadge?: boolean;
+  badgeColor?: string;
+  badgeBorderColor?: string;
+}
+
+/**
+ * Memoized ToolButton component to prevent unnecessary re-renders
+ */
+const ToolButton = React.memo<ToolButtonProps>(({
+  icon,
+  label,
+  onPress,
+  backgroundColor,
+  textColor,
+  showBadge,
+  badgeColor,
+  badgeBorderColor,
+}) => {
+  const buttonStyle = useMemo(() => [
+    styles.toolButton,
+    { backgroundColor }
+  ], [backgroundColor]);
+
+  const textStyle = useMemo(() => ({
+    color: textColor,
+    marginTop: 4
+  }), [textColor]);
+
+  const badgeStyle = useMemo(() => [
+    styles.audioBadge,
+    {
+      backgroundColor: badgeColor,
+      borderColor: badgeBorderColor,
+    }
+  ], [badgeColor, badgeBorderColor]);
+
+  return (
+    <TouchableOpacity
+      style={buttonStyle}
+      onPress={onPress}
+    >
+      <AtomicIcon name={icon as any} size="md" color="primary" />
+      <AtomicText
+        type="labelSmall"
+        style={textStyle}
+      >
+        {label}
+      </AtomicText>
+      {showBadge && badgeColor && (
+        <View style={badgeStyle} />
+      )}
+    </TouchableOpacity>
+  );
+});
+
+ToolButton.displayName = 'ToolButton';
+
+export const EditorToolPanel: React.FC<EditorToolPanelProps> = React.memo(({
   onAddText,
   onAddImage,
   onAddShape,
@@ -36,136 +99,99 @@ export const EditorToolPanel: React.FC<EditorToolPanelProps> = ({
   const { t } = useLocalization();
   const tokens = useAppDesignTokens();
 
+  // Memoize styles
+  const containerStyle = useMemo(() => [
+    styles.toolPanel,
+    { backgroundColor: tokens.colors.surface }
+  ], [tokens.colors.surface]);
+
+  const titleStyle = useMemo(() => ({
+    color: tokens.colors.textPrimary,
+    fontWeight: "600" as const,
+    marginBottom: 12,
+  }), [tokens.colors.textPrimary]);
+
+  const backgroundColor = tokens.colors.backgroundPrimary;
+  const textColor = tokens.colors.textPrimary;
+
+  // Stable callbacks
+  const handleAddText = useCallback(() => onAddText(), [onAddText]);
+  const handleAddImage = useCallback(() => onAddImage(), [onAddImage]);
+  const handleAddShape = useCallback(() => onAddShape(), [onAddShape]);
+  const handleAudio = useCallback(() => onAudio(), [onAudio]);
+  const handleFilters = useCallback(() => onFilters?.(), [onFilters]);
+  const handleSpeed = useCallback(() => onSpeed?.(), [onSpeed]);
+
   return (
-    <View
-      style={[styles.toolPanel, { backgroundColor: tokens.colors.surface }]}
-    >
+    <View style={containerStyle}>
       <AtomicText
         type="bodyMedium"
-        style={{
-          color: tokens.colors.textPrimary,
-          fontWeight: "600",
-          marginBottom: 12,
-        }}
+        style={titleStyle}
       >
         {t("editor.tools.title")}
       </AtomicText>
 
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-        <TouchableOpacity
-          style={[
-            styles.toolButton,
-            { backgroundColor: tokens.colors.backgroundPrimary },
-          ]}
-          onPress={onAddText}
-        >
-          <AtomicIcon name="text-outline" size="md" color="primary" />
-          <AtomicText
-            type="labelSmall"
-            style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
-          >
-            {t("editor.tools.text")}
-          </AtomicText>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={[
-            styles.toolButton,
-            { backgroundColor: tokens.colors.backgroundPrimary },
-          ]}
-          onPress={onAddImage}
-        >
-          <AtomicIcon name="image-outline" size="md" color="primary" />
-          <AtomicText
-            type="labelSmall"
-            style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
-          >
-            {t("editor.tools.image")}
-          </AtomicText>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={[
-            styles.toolButton,
-            { backgroundColor: tokens.colors.backgroundPrimary },
-          ]}
-          onPress={onAddShape}
-        >
-          <AtomicIcon name="square-outline" size="md" color="primary" />
-          <AtomicText
-            type="labelSmall"
-            style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
-          >
-            {t("editor.tools.shape")}
-          </AtomicText>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={[
-            styles.toolButton,
-            { backgroundColor: tokens.colors.backgroundPrimary },
-          ]}
-          onPress={onAudio}
-        >
-          <AtomicIcon name="musical-notes-outline" size="md" color="primary" />
-          <AtomicText
-            type="labelSmall"
-            style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
-          >
-            {t("editor.tools.audio")}
-          </AtomicText>
-          {hasAudio && (
-            <View
-              style={[
-                styles.audioBadge,
-                {
-                  backgroundColor: tokens.colors.success,
-                  borderColor: tokens.colors.surface,
-                },
-              ]}
-            />
-          )}
-        </TouchableOpacity>
+        <ToolButton
+          icon="text-outline"
+          label={t("editor.tools.text")}
+          onPress={handleAddText}
+          backgroundColor={backgroundColor}
+          textColor={textColor}
+        />
+
+        <ToolButton
+          icon="image-outline"
+          label={t("editor.tools.image")}
+          onPress={handleAddImage}
+          backgroundColor={backgroundColor}
+          textColor={textColor}
+        />
+
+        <ToolButton
+          icon="square-outline"
+          label={t("editor.tools.shape")}
+          onPress={handleAddShape}
+          backgroundColor={backgroundColor}
+          textColor={textColor}
+        />
+
+        <ToolButton
+          icon="musical-notes-outline"
+          label={t("editor.tools.audio")}
+          onPress={handleAudio}
+          backgroundColor={backgroundColor}
+          textColor={textColor}
+          showBadge={hasAudio}
+          badgeColor={tokens.colors.success}
+          badgeBorderColor={tokens.colors.surface}
+        />
 
         {onFilters && (
-          <TouchableOpacity
-            style={[
-              styles.toolButton,
-              { backgroundColor: tokens.colors.backgroundPrimary },
-            ]}
-            onPress={onFilters}
-          >
-            <AtomicIcon name="sparkles" size="md" color="primary" />
-            <AtomicText
-              type="labelSmall"
-              style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
-            >
-              {t("editor.tools.filters") || "Filters"}
-            </AtomicText>
-          </TouchableOpacity>
+          <ToolButton
+            icon="sparkles"
+            label={t("editor.tools.filters") || "Filters"}
+            onPress={handleFilters}
+            backgroundColor={backgroundColor}
+            textColor={textColor}
+          />
         )}
 
         {onSpeed && (
-          <TouchableOpacity
-            style={[
-              styles.toolButton,
-              { backgroundColor: tokens.colors.backgroundPrimary },
-            ]}
-            onPress={onSpeed}
-          >
-            <AtomicIcon name="flash" size="md" color="primary" />
-            <AtomicText
-              type="labelSmall"
-              style={{ color: tokens.colors.textPrimary, marginTop: 4 }}
-            >
-              {t("editor.tools.speed") || "Speed"}
-            </AtomicText>
-          </TouchableOpacity>
+          <ToolButton
+            icon="flash"
+            label={t("editor.tools.speed") || "Speed"}
+            onPress={handleSpeed}
+            backgroundColor={backgroundColor}
+            textColor={textColor}
+          />
         )}
       </ScrollView>
     </View>
   );
-};
+});
+
+EditorToolPanel.displayName = 'EditorToolPanel';
 
 const styles = StyleSheet.create({
   toolPanel: {

package/src/presentation/hooks/useEditorHistory.ts

@@ -3,8 +3,9 @@
  * Single Responsibility: History operations for editor
  */
 
-import { useCallback, useState } from "react";
+import { useCallback, useState, useRef } from "react";
 import type { VideoProject } from "../../domain/entities/video-project.types";
+import { cloneVideoProject } from "../../infrastructure/utils/data-clone.utils";
 
 interface UseEditorHistoryParams {
   project: VideoProject | undefined;
@@ -27,20 +28,30 @@ export function useEditorHistory({
 }: UseEditorHistoryParams): UseEditorHistoryReturn {
   const [history, setHistory] = useState<VideoProject[]>([]);
   const [future, setFuture] = useState<VideoProject[]>([]);
+  const lastProjectRef = useRef<string | null>(null);
 
   const updateWithHistory = useCallback(
     (updates: Partial<VideoProject>, _action: string) => {
-      if (project) {
-        // Deep clone the project to avoid reference issues
-        const clonedProject = JSON.parse(JSON.stringify(project)) as VideoProject;
-        setHistory((prev) => {
-          const next = [...prev, clonedProject];
-          return next.length > MAX_HISTORY_SIZE ? next.slice(-MAX_HISTORY_SIZE) : next;
-        });
-        setFuture([]);
+      if (!project) return;
 
+      // Prevent duplicate history entries for same project state
+      const projectHash = JSON.stringify({ id: project.id, updatedAt: project.updatedAt });
+      if (lastProjectRef.current === projectHash) {
         onUpdateProject(updates);
+        return;
       }
+      lastProjectRef.current = projectHash;
+
+      // Optimized deep clone
+      const clonedProject = cloneVideoProject(project);
+
+      setHistory((prev) => {
+        const next = [...prev, clonedProject];
+        return next.length > MAX_HISTORY_SIZE ? next.slice(-MAX_HISTORY_SIZE) : next;
+      });
+      setFuture([]);
+
+      onUpdateProject(updates);
     },
     [project, onUpdateProject],
   );

package/src/presentation/hooks/useEditorPlayback.ts

@@ -1,10 +1,16 @@
 /**
  * useEditorPlayback Hook
  * Single Responsibility: Playback control for editor
+ * Optimized for performance with stable animation loop
  */
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import type { Scene } from "../../domain/entities/video-project.types";
+import {
+  calculateDelta,
+  addDeltaTime,
+  isTimeAtEnd,
+} from "../../infrastructure/utils/time-calculations.utils";
 
 interface UseEditorPlaybackParams {
   currentScene: Scene | undefined;
@@ -24,56 +30,87 @@ export function useEditorPlayback({
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
 
-  // Video playback animation loop
+  // Use refs to avoid re-creating animation loop on every render
+  const animationFrameRef = useRef<number | null>(null);
+  const lastTimestampRef = useRef<number>(0);
+  const isPlayingRef = useRef(isPlaying);
+  const currentSceneRef = useRef(currentScene);
+  const durationRef = useRef(0);
+
+  // Keep refs in sync
+  useEffect(() => {
+    isPlayingRef.current = isPlaying;
+  }, [isPlaying]);
+
+  useEffect(() => {
+    currentSceneRef.current = currentScene;
+    if (currentScene) {
+      durationRef.current = currentScene.duration;
+    }
+  }, [currentScene]);
+
+  // Video playback animation loop - optimized with refs
   useEffect(() => {
     if (!currentScene) return;
-    let animationFrameId: number;
-    let lastTimestamp = 0;
 
     const animate = (timestamp: number) => {
-      if (!isPlaying || !currentScene) return;
+      // Use refs for checks to avoid closure staleness
+      if (!isPlayingRef.current || !currentSceneRef.current) {
+        animationFrameRef.current = null;
+        return;
+      }
 
-      if (lastTimestamp === 0) {
-        lastTimestamp = timestamp;
+      if (lastTimestampRef.current === 0) {
+        lastTimestampRef.current = timestamp;
       }
-      const deltaTime = timestamp - lastTimestamp;
-      lastTimestamp = timestamp;
 
-      setCurrentTime((prevTime) => {
-        const newTime = prevTime + deltaTime;
-        const sceneDuration = currentScene.duration;
+      const deltaTime = calculateDelta(timestamp, lastTimestampRef.current);
+      lastTimestampRef.current = timestamp;
 
-        if (newTime >= sceneDuration) {
-          setIsPlaying(false);
+      setCurrentTime((prevTime) => {
+        const newTime = addDeltaTime(prevTime, deltaTime);
+        const sceneDuration = durationRef.current;
+
+        if (isTimeAtEnd(newTime, sceneDuration)) {
+          // Defer state update to avoid in-render setState
+          Promise.resolve().then(() => {
+            setIsPlaying(false);
+          });
           return sceneDuration;
         }
 
         return newTime;
       });
 
-      animationFrameId = requestAnimationFrame(animate);
+      animationFrameRef.current = requestAnimationFrame(animate);
     };
 
     if (isPlaying) {
-      lastTimestamp = 0;
-      animationFrameId = requestAnimationFrame(animate);
+      lastTimestampRef.current = 0;
+      animationFrameRef.current = requestAnimationFrame(animate);
     }
 
     return () => {
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
       }
     };
-  }, [isPlaying, currentScene?.duration]);
+  }, [isPlaying, currentScene]); // Only re-create loop when these change
 
   const playPause = useCallback(() => {
     if (!currentScene) return;
 
-    if (currentTime >= currentScene.duration) {
-      setCurrentTime(0);
-    }
-    setIsPlaying(!isPlaying);
-  }, [currentScene, currentTime, isPlaying]);
+    setCurrentTime((prevTime) => {
+      // Reset to 0 if at end
+      if (prevTime >= currentScene.duration) {
+        return 0;
+      }
+      return prevTime;
+    });
+
+    setIsPlaying((prev) => !prev);
+  }, [currentScene]);
 
   const reset = useCallback(() => {
     setCurrentTime(0);

package/src/presentation/hooks/useExportForm.ts

@@ -11,10 +11,9 @@ import type {
   Format,
 } from "../../infrastructure/constants/export.constants";
 import {
-  BASE_SIZE_PER_SECOND,
-  RESOLUTION_MULTIPLIERS,
-  QUALITY_MULTIPLIERS,
-} from "../../infrastructure/constants/export.constants";
+  calculateEstimatedFileSize,
+  calculateVideoProjectDuration,
+} from "../../infrastructure/utils/video-calculations.utils";
 
 interface ExportFormState {
   resolution: Resolution;
@@ -46,16 +45,15 @@ export function useExportForm(project: VideoProject): UseExportFormReturn {
   });
 
   const projectDuration = useMemo(() => {
-    return (
-      project.scenes.reduce((acc, scene) => acc + scene.duration, 0) / 1000
-    );
-  }, [project.scenes]);
+    return calculateVideoProjectDuration(project);
+  }, [project]);
 
   const estimatedSize = useMemo(() => {
-    const baseSize = projectDuration * BASE_SIZE_PER_SECOND;
-    const resolutionMultiplier = RESOLUTION_MULTIPLIERS[formState.resolution];
-    const qualityMultiplier = QUALITY_MULTIPLIERS[formState.quality];
-    return (baseSize * resolutionMultiplier * qualityMultiplier).toFixed(1);
+    return calculateEstimatedFileSize(
+      projectDuration,
+      formState.resolution,
+      formState.quality,
+    ).toFixed(1);
   }, [projectDuration, formState.resolution, formState.quality]);
 
   const setResolution = useCallback((resolution: Resolution) => {