@umituz/react-native-video-editor 1.2.5 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "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/presentation/components/CollageEditorCanvas.tsx

@@ -4,16 +4,15 @@
  */
 
 import React from "react";
-import { View, Dimensions } from "react-native";
+import { View } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { CollageCanvas } from "./collage/CollageCanvas";
 import { CollageControls } from "./collage/CollageControls";
 import { CollageLayoutSelector } from "./collage/CollageLayoutSelector";
 import type { CollageLayout } from "../../infrastructure/constants/collage.constants";
 
-const SCREEN_WIDTH = Dimensions.get("window").width;
-
 interface CollageEditorCanvasProps {
   layout: CollageLayout;
   images: (string | null)[];
@@ -40,7 +39,8 @@ export const CollageEditorCanvas: React.FC<CollageEditorCanvasProps> = ({
   canvasSize,
 }) => {
   const tokens = useAppDesignTokens();
-  const size = canvasSize ?? SCREEN_WIDTH - tokens.spacing.md * 2;
+  const responsive = useResponsive();
+  const size = canvasSize ?? responsive.width - tokens.spacing.md * 2;
 
   return (
     <View>

package/src/presentation/components/EditorPreviewArea.tsx

@@ -5,17 +5,16 @@
  */
 
 import React, { useMemo, useCallback } from "react";
-import { View, TouchableOpacity, Dimensions } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 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;
-const PREVIEW_HEIGHT = width / PREVIEW_ASPECT_RATIO;
 
 interface EditorPreviewAreaProps {
   scene: Scene;
@@ -43,8 +42,11 @@ export const EditorPreviewArea: React.FC<EditorPreviewAreaProps> = React.memo(({
   onReset,
 }) => {
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
   const styles = useMemo(() => createPreviewStyles(tokens), [tokens]);
 
+  const previewHeight = useMemo(() => responsive.width / PREVIEW_ASPECT_RATIO, [responsive.width]);
+
   // Memoize canvas style
   const canvasStyle = useMemo(() => [
     styles.previewCanvas,
@@ -53,9 +55,9 @@ export const EditorPreviewArea: React.FC<EditorPreviewAreaProps> = React.memo(({
         scene.background.type === "color"
           ? scene.background.value
           : tokens.colors.surfaceSecondary,
-      height: PREVIEW_HEIGHT,
+      height: previewHeight,
     },
-  ], [styles.previewCanvas, scene.background.type, scene.background.value, tokens.colors.surfaceSecondary]);
+  ], [styles.previewCanvas, scene.background.type, scene.background.value, tokens.colors.surfaceSecondary, previewHeight]);
 
   // Memoize empty preview text style
   const emptyTextStyle = useMemo(() => ({