Merge pull request #417 from BinaryStudioAcademy/task/OV-415-do-not-d…

…elete-scene-on-resize

OV-415: Do not delete scene on resize

frontend/src/bundles/studio/components/timeline/timeline.tsx

@@ -1,10 +1,12 @@
 import { PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { type PlayerRef } from '@remotion/player';
+import { secondsToMilliseconds } from 'date-fns';
 import {
     type DragEndEvent,
     type DragMoveEvent,
     type Range,
     type ResizeEndEvent,
+    type ResizeMoveEvent,
     TimelineContext,
 } from 'dnd-timeline';
 import { type RefObject } from 'react';
@@ -14,7 +16,10 @@ import {
     useAppSelector,
     useCallback,
 } from '~/bundles/common/hooks/hooks.js';
-import { DND_ACTIVATION_DISTANCE_PIXELS } from '~/bundles/studio/constants/constants.js';
+import {
+    DND_ACTIVATION_DISTANCE_PIXELS,
+    MIN_SCENE_DURATION,
+} from '~/bundles/studio/constants/constants.js';
 import { RowNames } from '~/bundles/studio/enums/row-names.enum.js';
 import { actions as studioActions } from '~/bundles/studio/store/studio.js';
 import { type RowType } from '~/bundles/studio/types/types.js';
@@ -57,6 +62,42 @@ const Timeline: React.FC<Properties> = ({ playerRef }) => {
         [dispatch],
     );
 
+    const handleResizing = useCallback(
+        (event: ResizeMoveEvent): void => {
+            const activeItem = event.active.data.current;
+            const activeItemType = activeItem['type'] as RowType;
+
+            const updatedSpan = activeItem.getSpanFromResizeEvent?.(event);
+
+            if (
+                !updatedSpan ||
+                activeItemType === RowNames.SCRIPT ||
+                activeItemType === RowNames.BUTTON
+            ) {
+                return;
+            }
+
+            if (
+                updatedSpan.end - updatedSpan.start <
+                secondsToMilliseconds(MIN_SCENE_DURATION)
+            ) {
+                updatedSpan.end =
+                    updatedSpan.start +
+                    secondsToMilliseconds(MIN_SCENE_DURATION);
+
+                const activeItemId = event.active.id as string;
+
+                dispatch(
+                    studioActions.resizeScene({
+                        id: activeItemId,
+                        span: updatedSpan,
+                    }),
+                );
+            }
+        },
+        [dispatch],
+    );
+
     const handleDragMove = useCallback(
         (event: DragMoveEvent) => {
             const activeItem = event.active.data.current;
@@ -149,6 +190,7 @@ const Timeline: React.FC<Properties> = ({ playerRef }) => {
         <TimelineContext
             range={range}
             onDragEnd={handleDragEnd}
+            onResizeMove={handleResizing}
             onResizeEnd={handleResizeEnd}
             onRangeChanged={handleRangeChanged}
             onDragMove={handleDragMove}

frontend/src/bundles/studio/constants/constants.ts

@@ -1,11 +1,12 @@
 export { ADD_BUTTON_PADDING_MILLISECONDS } from './add-button-padding-milliseconds.js';
+export { DEFAULT_SCENE_DURATION } from './default-scene-duration.constant.js';
+export { DEFAULT_SCRIPT_DURATION } from './default-script-duration.constant.js';
 export { DEFAULT_VIDEO_NAME } from './default-video-name.js';
 export { DEFAULT_VOICE } from './default-voice-name.constant.js';
 export { DND_ACTIVATION_DISTANCE_PIXELS } from './dnd-activation-distance-pixels.constant.js';
 export { GROW_COEFFICIENT } from './grow-coefficient.js';
 export { MAX_SCENES_BEFORE_RESIZE } from './max-scenes-before-resize.js';
 export { MIN_SCENE_DURATION } from './min-scene-duration.constant.js';
-export { MIN_SCRIPT_DURATION } from './min-script-duration.constant.js';
 export { NEW_SCRIPT_TEXT } from './new-script-text.constant.js';
 export { SCRIPT_AND_AVATAR_ARE_REQUIRED } from './script-and-avatar-are-required.constant.js';
 export { SKIP_TO_PREV_SCENE_THRESHOLD } from './skip-to-previous-scene-threshold.constant.js';

frontend/src/bundles/studio/constants/default-scene-duration.constant.ts

@@ -0,0 +1,3 @@
+const DEFAULT_SCENE_DURATION = 15;
+
+export { DEFAULT_SCENE_DURATION };

frontend/src/bundles/studio/constants/default-script-duration.constant.ts

@@ -0,0 +1,3 @@
+const DEFAULT_SCRIPT_DURATION = 10;
+
+export { DEFAULT_SCRIPT_DURATION };

frontend/src/bundles/studio/constants/min-scene-duration.constant.ts

@@ -1,3 +1,3 @@
-const MIN_SCENE_DURATION = 15;
+const MIN_SCENE_DURATION = 1;
 
 export { MIN_SCENE_DURATION };

frontend/src/bundles/studio/store/slice.ts

@@ -9,9 +9,10 @@ import {
     type VideoPreview as VideoPreviewT,
 } from '~/bundles/common/types/types.js';
 import {
+    DEFAULT_SCENE_DURATION,
+    DEFAULT_SCRIPT_DURATION,
     DEFAULT_VOICE,
     MIN_SCENE_DURATION,
-    MIN_SCRIPT_DURATION,
 } from '~/bundles/studio/constants/constants.js';
 
 import { type MenuItems, PlayIconNames, RowNames } from '../enums/enums.js';
@@ -102,7 +103,7 @@ const initialState: State = {
         elapsedTime: 0,
     },
     range: { start: 0, end: minutesToMilliseconds(1) },
-    scenes: [{ id: uuidv4(), duration: MIN_SCENE_DURATION }],
+    scenes: [{ id: uuidv4(), duration: DEFAULT_SCENE_DURATION }],
     scripts: [],
     selectedScriptId: null,
     videoSize: VideoPreview.LANDSCAPE,
@@ -129,7 +130,7 @@ const { reducer, actions, name } = createSlice({
         addScript(state, action: PayloadAction<string>) {
             const script = {
                 id: uuidv4(),
-                duration: MIN_SCRIPT_DURATION,
+                duration: DEFAULT_SCRIPT_DURATION,
                 text: action.payload,
                 voice: DEFAULT_VOICE,
                 iconName: PlayIconNames.READY,
@@ -194,7 +195,7 @@ const { reducer, actions, name } = createSlice({
         addScene(state) {
             const scene = {
                 id: uuidv4(),
-                duration: MIN_SCENE_DURATION,
+                duration: DEFAULT_SCENE_DURATION,
             };
             state.ui.selectedItem = { id: scene.id, type: RowNames.SCENE };
             state.scenes.push(scene);
@@ -212,7 +213,11 @@ const { reducer, actions, name } = createSlice({
                     return item;
                 }
 
-                const duration = millisecondsToSeconds(span.end - span.start);
+                let duration = millisecondsToSeconds(span.end - span.start);
+
+                if (duration < MIN_SCENE_DURATION) {
+                    duration = MIN_SCENE_DURATION;
+                }
 
                 return {
                     ...item,