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

package/src/infrastructure/utils/position-calculations.utils.ts

@@ -1,182 +1,66 @@
 /**
  * Position & Size Calculation Utilities
- * Centralized position and size calculations for video editor
  */
 
-export interface Position {
-  x: number;
-  y: number;
-}
+export interface Position { x: number; y: number; }
+export interface Size { width: number; height: number; }
 
-export interface Size {
-  width: number;
-  height: number;
-}
-
-/**
- * Convert percentage position to canvas pixels
- */
-export function percentageToPixels(
-  percentage: number,
-  canvasSize: number,
-): number {
+export const percentageToPixels = (percentage: number, canvasSize: number): number => {
   if (canvasSize <= 0) return 0;
   return (percentage / 100) * canvasSize;
-}
+};
 
-/**
- * Convert canvas pixels to percentage
- */
-export function pixelsToPercentage(
-  pixels: number,
-  canvasSize: number,
-): number {
+export const pixelsToPercentage = (pixels: number, canvasSize: number): number => {
   if (canvasSize <= 0) return 0;
   return (pixels / canvasSize) * 100;
-}
+};
 
-/**
- * Convert position from percentage to pixels
- */
-export function positionToPixels(
-  position: Position,
-  canvasWidth: number,
-  canvasHeight: number,
-): Position {
-  return {
-    x: percentageToPixels(position.x, canvasWidth),
-    y: percentageToPixels(position.y, canvasHeight),
-  };
-}
+export const positionToPixels = (position: Position, canvasWidth: number, canvasHeight: number): Position => ({
+  x: percentageToPixels(position.x, canvasWidth),
+  y: percentageToPixels(position.y, canvasHeight),
+});
 
-/**
- * Convert position from pixels to percentage
- */
-export function positionToPercentage(
-  position: Position,
-  canvasWidth: number,
-  canvasHeight: number,
-): Position {
-  return {
-    x: pixelsToPercentage(position.x, canvasWidth),
-    y: pixelsToPercentage(position.y, canvasHeight),
-  };
-}
+export const positionToPercentage = (position: Position, canvasWidth: number, canvasHeight: number): Position => ({
+  x: pixelsToPercentage(position.x, canvasWidth),
+  y: pixelsToPercentage(position.y, canvasHeight),
+});
 
-/**
- * Convert size from percentage to pixels
- */
-export function sizeToPixels(
-  size: Size,
-  canvasWidth: number,
-  canvasHeight: number,
-): Size {
-  return {
-    width: percentageToPixels(size.width, canvasWidth),
-    height: percentageToPixels(size.height, canvasHeight),
-  };
-}
+export const sizeToPixels = (size: Size, canvasWidth: number, canvasHeight: number): Size => ({
+  width: percentageToPixels(size.width, canvasWidth),
+  height: percentageToPixels(size.height, canvasHeight),
+});
 
-/**
- * Convert size from pixels to percentage
- */
-export function sizeToPercentage(
-  size: Size,
-  canvasWidth: number,
-  canvasHeight: number,
-): Size {
-  return {
-    width: pixelsToPercentage(size.width, canvasWidth),
-    height: pixelsToPercentage(size.height, canvasHeight),
-  };
-}
+export const sizeToPercentage = (size: Size, canvasWidth: number, canvasHeight: number): Size => ({
+  width: pixelsToPercentage(size.width, canvasWidth),
+  height: pixelsToPercentage(size.height, canvasHeight),
+});
 
-/**
- * Clamp value between min and max
- */
-export function clamp(value: number, min: number, max: number): number {
-  return Math.max(min, Math.min(max, value));
-}
+export const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value));
 
-/**
- * Clamp position to canvas bounds (in pixels)
- */
-export function clampPositionToCanvas(
-  position: Position,
-  canvasWidth: number,
-  canvasHeight: number,
-  elementWidth: number,
-  elementHeight: number,
-): Position {
-  return {
-    x: clamp(position.x, 0, canvasWidth - elementWidth),
-    y: clamp(position.y, 0, canvasHeight - elementHeight),
-  };
-}
+export const clampPositionToCanvas = (position: Position, canvasWidth: number, canvasHeight: number, elementWidth: number, elementHeight: number): Position => ({
+  x: clamp(position.x, 0, canvasWidth - elementWidth),
+  y: clamp(position.y, 0, canvasHeight - elementHeight),
+});
 
-/**
- * Clamp position to percentage bounds (0-100)
- */
-export function clampPositionPercentage(position: Position): Position {
-  return {
-    x: clamp(position.x, 0, 100),
-    y: clamp(position.y, 0, 100),
-  };
-}
+export const clampPositionPercentage = (position: Position): Position => ({
+  x: clamp(position.x, 0, 100),
+  y: clamp(position.y, 0, 100),
+});
 
-/**
- * Clamp size to minimum and maximum percentage values
- */
-export function clampSizePercentage(
-  size: Size,
-  minSize: number = 1,
-  maxSize: number = 100,
-): Size {
-  return {
-    width: clamp(size.width, minSize, maxSize),
-    height: clamp(size.height, minSize, maxSize),
-  };
-}
+export const clampSizePercentage = (size: Size, minSize: number = 1, maxSize: number = 100): Size => ({
+  width: clamp(size.width, minSize, maxSize),
+  height: clamp(size.height, minSize, maxSize),
+});
 
-/**
- * Calculate center position for an element
- */
-export function calculateCenterPosition(
-  elementWidth: number,
-  elementHeight: number,
-  canvasWidth: number,
-  canvasHeight: number,
-): Position {
-  return {
-    x: (canvasWidth - elementWidth) / 2,
-    y: (canvasHeight - elementHeight) / 2,
-  };
-}
+export const calculateCenterPosition = (elementWidth: number, elementHeight: number, canvasWidth: number, canvasHeight: number): Position => ({
+  x: (canvasWidth - elementWidth) / 2,
+  y: (canvasHeight - elementHeight) / 2,
+});
 
-/**
- * Offset position by delta
- */
-export function offsetPosition(position: Position, deltaX: number, deltaY: number): Position {
-  return {
-    x: position.x + deltaX,
-    y: position.y + deltaY,
-  };
-}
+export const offsetPosition = (position: Position, deltaX: number, deltaY: number): Position => ({
+  x: position.x + deltaX,
+  y: position.y + deltaY,
+});
 
-/**
- * Check if position is within canvas bounds
- */
-export function isPositionInBounds(
-  position: Position,
-  canvasWidth: number,
-  canvasHeight: number,
-  elementWidth: number,
-  elementHeight: number,
-): boolean {
-  return (
-    position.x >= 0 &&
-    position.y >= 0 &&
-    position.x + elementWidth <= canvasWidth &&
-    position.y + elementHeight <= canvasHeight
-  );
-}
+export const isPositionInBounds = (position: Position, canvasWidth: number, canvasHeight: number, elementWidth: number, elementHeight: number): boolean =>
+  position.x >= 0 && position.y >= 0 && position.x + elementWidth <= canvasWidth && position.y + elementHeight <= canvasHeight;

package/src/presentation/components/EditorTimeline.tsx

@@ -1,10 +1,11 @@
 /**
  * Editor Timeline Component
  * Single Responsibility: Display scene timeline
+ * PERFORMANCE: Uses FlatList for efficient horizontal scene rendering
  */
 
-import React, { useMemo } from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import React, { useMemo, useCallback } from "react";
+import { View, FlatList, 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 { useLocalization } from "@umituz/react-native-settings";
@@ -131,15 +132,13 @@ export const EditorTimeline: React.FC<EditorTimelineProps> = ({
         </TouchableOpacity>
       </View>
 
-      <ScrollView
+      <FlatList
         horizontal
-        showsHorizontalScrollIndicator={false}
-        style={styles.scenesScroll}
-      >
-        {project.scenes.map((scene: Scene, index: number) => (
+        data={project.scenes}
+        keyExtractor={(scene) => scene.id}
+        renderItem={useCallback(({ item, index }: { item: Scene; index: number }) => (
           <SceneCard
-            key={scene.id}
-            scene={scene}
+            scene={item}
             index={index}
             isSelected={currentSceneIndex === index}
             onSelect={onSceneSelect}
@@ -151,8 +150,27 @@ export const EditorTimeline: React.FC<EditorTimelineProps> = ({
             onPrimaryColor={tokens.colors.onPrimary}
             textPrimaryColor={tokens.colors.textPrimary}
           />
-        ))}
-      </ScrollView>
+        ), [currentSceneIndex, onSceneSelect, onSceneLongPress, tokens.colors])}
+        showsHorizontalScrollIndicator={false}
+        style={styles.scenesScroll}
+        // Performance optimizations for horizontal lists
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={5}
+        updateCellsBatchingPeriod={50}
+        initialNumToRender={5}
+        windowSize={5}
+        // Prevents layout flicker
+        getItemLayout={(data, index) => ({
+          length: 84, // sceneCard width + marginRight
+          offset: 84 * index,
+          index,
+        })}
+        // Maintain scroll position
+        maintainVisibleContentPosition={{
+          minIndexForVisible: 0,
+          autoscrollToTopThreshold: 10,
+        }}
+      />
     </View>
   );
 };

package/src/presentation/components/EditorToolPanel.tsx

@@ -1,18 +1,15 @@
 /**
  * Editor Tool Panel Component
  * Single Responsibility: Display editor tool buttons
+ * REFACTORED: Uses generic Toolbar component (52 lines)
  */
 
-import React, { useMemo, useCallback } from "react";
-import {
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-} from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { useLocalization } from "@umituz/react-native-settings";
+import { Toolbar, type ToolbarButton, type ToolbarSection } from "./generic/Toolbar";
 
 interface EditorToolPanelProps {
   onAddText: () => void;
@@ -24,69 +21,6 @@ interface EditorToolPanelProps {
   onSpeed?: () => void;
 }
 
-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,
@@ -99,28 +33,70 @@ export const EditorToolPanel: React.FC<EditorToolPanelProps> = React.memo(({
   const { t } = useLocalization();
   const tokens = useAppDesignTokens();
 
-  // Memoize styles
-  const containerStyle = useMemo(() => [
-    styles.toolPanel,
-    { backgroundColor: tokens.colors.surface }
-  ], [tokens.colors.surface]);
+  const toolbarSections = useMemo<ToolbarSection[]>(() => {
+    const buttons: ToolbarButton[] = [
+      {
+        id: "text",
+        icon: "text-outline",
+        label: t("editor.tools.text"),
+        onPress: onAddText,
+      },
+      {
+        id: "image",
+        icon: "image-outline",
+        label: t("editor.tools.image"),
+        onPress: onAddImage,
+      },
+      {
+        id: "shape",
+        icon: "square-outline",
+        label: t("editor.tools.shape"),
+        onPress: onAddShape,
+      },
+      {
+        id: "audio",
+        icon: "musical-notes-outline",
+        label: t("editor.tools.audio"),
+        onPress: onAudio,
+        showBadge: hasAudio,
+        badgeColor: tokens.colors.success,
+      },
+    ];
+
+    if (onFilters) {
+      buttons.push({
+        id: "filters",
+        icon: "sparkles",
+        label: t("editor.tools.filters") || "Filters",
+        onPress: onFilters,
+      });
+    }
+
+    if (onSpeed) {
+      buttons.push({
+        id: "speed",
+        icon: "flash",
+        label: t("editor.tools.speed") || "Speed",
+        onPress: onSpeed,
+      });
+    }
+
+    return [{ id: "tools", buttons }];
+  }, [t, onAddText, onAddImage, onAddShape, onAudio, hasAudio, onFilters, onSpeed, tokens.colors.success]);
+
+  const containerStyle = useMemo(() => ({
+    backgroundColor: tokens.colors.surface,
+    borderRadius: tokens.borders.radius.lg,
+    padding: tokens.spacing.md,
+    marginHorizontal: tokens.spacing.md,
+    marginBottom: tokens.spacing.md,
+  }), [tokens.colors.surface, tokens.borders.radius.lg, tokens.spacing.md]);
 
   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]);
+    marginBottom: tokens.spacing.sm,
+  }), [tokens.colors.textPrimary, tokens.spacing.sm]);
 
   return (
     <View style={containerStyle}>
@@ -130,91 +106,14 @@ export const EditorToolPanel: React.FC<EditorToolPanelProps> = React.memo(({
       >
         {t("editor.tools.title")}
       </AtomicText>
-
-      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-        <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 && (
-          <ToolButton
-            icon="sparkles"
-            label={t("editor.tools.filters") || "Filters"}
-            onPress={handleFilters}
-            backgroundColor={backgroundColor}
-            textColor={textColor}
-          />
-        )}
-
-        {onSpeed && (
-          <ToolButton
-            icon="flash"
-            label={t("editor.tools.speed") || "Speed"}
-            onPress={handleSpeed}
-            backgroundColor={backgroundColor}
-            textColor={textColor}
-          />
-        )}
-      </ScrollView>
+      <Toolbar
+        sections={toolbarSections}
+        orientation="horizontal"
+        scrollable
+        testID="editor-tool-panel"
+      />
     </View>
   );
 });
 
 EditorToolPanel.displayName = 'EditorToolPanel';
-
-const styles = StyleSheet.create({
-  toolPanel: {
-    padding: 16,
-    marginHorizontal: 16,
-    marginBottom: 16,
-    borderRadius: 12,
-  },
-  toolButton: {
-    width: 80,
-    height: 80,
-    borderRadius: 12,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 12,
-  },
-  audioBadge: {
-    position: "absolute",
-    top: 8,
-    right: 8,
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-    borderWidth: 2,
-  },
-});