From f09291fe98575ba3a334c273742856c3c9106ea2 Mon Sep 17 00:00:00 2001
From: Oleksandra Okhotnykova <ohotnikova.sasha2002@gmail.com>
Date: Tue, 24 Sep 2024 16:06:18 +0200
Subject: [PATCH] OV-410: * when resizing scene - remove plus button

---
 .../studio/components/timeline/item/item.tsx  | 14 +++++-
 .../components/timeline/rows/scenes-row.tsx   | 46 ++++++++++++-------
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/frontend/src/bundles/studio/components/timeline/item/item.tsx b/frontend/src/bundles/studio/components/timeline/item/item.tsx
index ad83a15ed..01829a1a1 100644
--- a/frontend/src/bundles/studio/components/timeline/item/item.tsx
+++ b/frontend/src/bundles/studio/components/timeline/item/item.tsx
@@ -13,9 +13,19 @@ type Properties = {
     span: Span;
     children: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLElement>;
+    onResizeStart?: () => void;
+    onResizeEnd?: () => void;
 };
 
-const Item: React.FC<Properties> = ({ id, type, span, children, onClick }) => {
+const Item: React.FC<Properties> = ({
+    id,
+    type,
+    span,
+    children,
+    onClick,
+    onResizeStart = (): void => {},
+    onResizeEnd = (): void => {},
+}) => {
     const selectedItem = useAppSelector(({ studio }) => studio.ui.selectedItem);
 
     const {
@@ -29,6 +39,8 @@ const Item: React.FC<Properties> = ({ id, type, span, children, onClick }) => {
         id,
         span,
         data: { type },
+        onResizeEnd,
+        onResizeStart,
     });
 
     return (
diff --git a/frontend/src/bundles/studio/components/timeline/rows/scenes-row.tsx b/frontend/src/bundles/studio/components/timeline/rows/scenes-row.tsx
index f8d429603..75a899080 100644
--- a/frontend/src/bundles/studio/components/timeline/rows/scenes-row.tsx
+++ b/frontend/src/bundles/studio/components/timeline/rows/scenes-row.tsx
@@ -8,6 +8,7 @@ import {
     useAppSelector,
     useCallback,
     useMemo,
+    useState,
 } from '~/bundles/common/hooks/hooks.js';
 import { IconName, IconSize } from '~/bundles/common/icons/icons.js';
 import { Control } from '~/bundles/studio/components/components.js';
@@ -23,6 +24,7 @@ import { Item, Row } from '../components.js';
 import styles from './styles.module.css';
 
 const ScenesRow: React.FC = () => {
+    const [isResizing, setIsResizing] = useState(false);
     const scenes = useAppSelector(({ studio }) => studio.scenes);
     const scenesWithSpan = useMemo(() => setItemsSpan(scenes), [scenes]);
     const { pixelsToValue } = useTimelineContext();
@@ -70,6 +72,14 @@ const ScenesRow: React.FC = () => {
         [dispatch],
     );
 
+    const handleResizing = useCallback((): void => {
+        setIsResizing(true);
+    }, []);
+
+    const handleResizingEnd = useCallback((): void => {
+        setIsResizing(false);
+    }, []);
+
     return (
         <Row
             id={RowNames.SCENE}
@@ -82,6 +92,8 @@ const ScenesRow: React.FC = () => {
                     type={RowNames.SCENE}
                     {...item}
                     onClick={handleItemClick}
+                    onResizeEnd={handleResizingEnd}
+                    onResizeStart={handleResizing}
                 >
                     <Badge
                         className={styles['scene-badge']}
@@ -118,22 +130,24 @@ const ScenesRow: React.FC = () => {
                 </Item>
             ))}
 
-            <Item
-                type={RowNames.BUTTON}
-                id="Add scene button"
-                span={{ start: scenesEnd, end: buttonEnd }}
-            >
-                <Control
-                    label="Add a scene"
-                    size={IconSize.LARGE}
-                    icon={IconName.ADD}
-                    variant="light"
-                    height="100%"
-                    width="100%"
-                    isRound={false}
-                    onClick={handleAddClick}
-                />
-            </Item>
+            {!isResizing && (
+                <Item
+                    type={RowNames.BUTTON}
+                    id="Add scene button"
+                    span={{ start: scenesEnd, end: buttonEnd }}
+                >
+                    <Control
+                        label="Add a scene"
+                        size={IconSize.LARGE}
+                        icon={IconName.ADD}
+                        variant="light"
+                        height="100%"
+                        width="100%"
+                        isRound={false}
+                        onClick={handleAddClick}
+                    />
+                </Item>
+            )}
         </Row>
     );
 };