Merge pull request #239 from BinaryStudioAcademy/task/OV-198-add-item…

…s-on-timeline-buttons OV-198: Add items on timeline buttons
BinaryStudioAcademy · Sep 11, 2024 · ee0bce6 · ee0bce6
2 parents eadb840 + 9768fe9
commit ee0bce6
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 6 deletions.
diff --git a/frontend/src/bundles/studio/components/components.ts b/frontend/src/bundles/studio/components/components.ts
@@ -1,3 +1,4 @@
+export { Control } from './control/control.js';
 export { PlayerControls } from './player-controls/player-controls.js';
 export { Timeline } from './timeline/timeline.js';
 export { VideoComponent } from './video/video.js';

diff --git a/...r-controls/components/control/control.tsx → ...les/studio/components/control/control.tsx b/...r-controls/components/control/control.tsx → ...les/studio/components/control/control.tsx
@@ -12,21 +12,31 @@ type Properties = {
     size: IconSizeT;
     icon: ElementType;
     onClick?: () => void;
+    width?: string;
+    height?: string;
+    isRound?: boolean;
+    variant?: string;
 };
 
 const Control: React.FC<Properties> = ({
     label,
     size,
     icon,
     onClick = (): void => {},
+    width,
+    height,
+    isRound = true,
+    variant = 'gray',
 }) => {
     return (
         <Tooltip hasArrow label={label} placement="top">
             <IconButton
                 aria-label={label}
-                isRound={true}
+                isRound={isRound}
+                {...(width && { width })}
+                {...(height && { height })}
                 size={size}
-                variant="gray"
+                variant={variant}
                 icon={<Icon as={icon} />}
                 onClick={onClick}
             />

diff --git a/frontend/src/bundles/studio/components/player-controls/components/components.ts b/frontend/src/bundles/studio/components/player-controls/components/components.ts
@@ -1,2 +1 @@
-export { Control } from './control/control.js';
 export { TimeDisplay } from './time-display/time-display.js';
diff --git a/frontend/src/bundles/studio/components/player-controls/player-controls.tsx b/frontend/src/bundles/studio/components/player-controls/player-controls.tsx
@@ -13,7 +13,8 @@ import { setItemsSpan } from '~/bundles/studio/helpers/set-items-span.js';
 import { selectTotalDuration } from '~/bundles/studio/store/selectors.js';
 import { actions as studioActions } from '~/bundles/studio/store/studio.js';
 
-import { Control, TimeDisplay } from './components/components.js';
+import { Control } from '../components.js';
+import { TimeDisplay } from './components/components.js';
 
 const PlayerControls: React.FC = () => {
     const dispatch = useAppDispatch();

diff --git a/frontend/src/bundles/studio/components/timeline/rows/scenes-row.tsx b/frontend/src/bundles/studio/components/timeline/rows/scenes-row.tsx
@@ -1,14 +1,29 @@
 import { Badge, Image } from '~/bundles/common/components/components.js';
 import { useAppSelector, useMemo } from '~/bundles/common/hooks/hooks.js';
+import { IconName, IconSize } from '~/bundles/common/icons/icons.js';
+import { Control } from '~/bundles/studio/components/components.js';
 import { RowNames } from '~/bundles/studio/enums/enums.js';
-import { setItemsSpan } from '~/bundles/studio/helpers/set-items-span.js';
+import {
+    getElementEnd,
+    setItemsSpan,
+} from '~/bundles/studio/helpers/helpers.js';
+import { useTimelineContext } from '~/bundles/studio/hooks/hooks.js';
 import styles from '~/framework/theme/styles/css-modules/timeline.module.css';
 
 import { Item, Row } from '../components.js';
 
 const ScenesRow: React.FC = () => {
     const scenes = useAppSelector(({ studio }) => studio.scenes);
     const scenesWithSpan = useMemo(() => setItemsSpan(scenes), [scenes]);
+    const { pixelsToValue } = useTimelineContext();
+
+    const scenesEnd = scenesWithSpan.at(-1)?.span.end ?? 0;
+    const buttonWidthInPixels = 60;
+
+    const buttonEnd = getElementEnd(
+        scenesEnd,
+        pixelsToValue(buttonWidthInPixels),
+    );
 
     return (
         <Row
@@ -35,6 +50,22 @@ const ScenesRow: React.FC = () => {
                     )}
                 </Item>
             ))}
+
+            <Item
+                type={RowNames.SCENE}
+                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}
+                />
+            </Item>
         </Row>
     );
 };

diff --git a/frontend/src/bundles/studio/components/timeline/rows/scripts-row.tsx b/frontend/src/bundles/studio/components/timeline/rows/scripts-row.tsx
@@ -1,13 +1,28 @@
 import { Text } from '~/bundles/common/components/components.js';
 import { useAppSelector, useMemo } from '~/bundles/common/hooks/hooks.js';
+import { IconName, IconSize } from '~/bundles/common/icons/icons.js';
+import { Control } from '~/bundles/studio/components/components.js';
 import { RowNames } from '~/bundles/studio/enums/enums.js';
-import { setItemsSpan } from '~/bundles/studio/helpers/set-items-span.js';
+import {
+    getElementEnd,
+    setItemsSpan,
+} from '~/bundles/studio/helpers/helpers.js';
+import { useTimelineContext } from '~/bundles/studio/hooks/hooks.js';
 
 import { Item, Row } from '../components.js';
 
 const ScriptsRow: React.FC = () => {
     const scripts = useAppSelector(({ studio }) => studio.scripts);
     const scriptsWithSpan = useMemo(() => setItemsSpan(scripts), [scripts]);
+    const { pixelsToValue } = useTimelineContext();
+
+    const scriptsEnd = scriptsWithSpan.at(-1)?.span.end ?? 0;
+    const buttonWidthInPixels = 100;
+
+    const buttonEnd = getElementEnd(
+        scriptsEnd,
+        pixelsToValue(buttonWidthInPixels),
+    );
 
     return (
         <Row
@@ -29,6 +44,22 @@ const ScriptsRow: React.FC = () => {
                     </Text>
                 </Item>
             ))}
+
+            <Item
+                type={RowNames.SCENE}
+                id="Add script button"
+                span={{ start: scriptsEnd, end: buttonEnd }}
+            >
+                <Control
+                    label="Add script"
+                    size={IconSize.MEDIUM}
+                    icon={IconName.ADD}
+                    variant="light"
+                    height="100%"
+                    width="100%"
+                    isRound={false}
+                />
+            </Item>
         </Row>
     );
 };

diff --git a/frontend/src/bundles/studio/helpers/get-element-end.ts b/frontend/src/bundles/studio/helpers/get-element-end.ts
@@ -0,0 +1,5 @@
+const getElementEnd = (itemsEnd: number, elementWidth: number): number => {
+    return itemsEnd + (Number.isFinite(elementWidth) ? elementWidth : 0);
+};
+
+export { getElementEnd };
diff --git a/frontend/src/bundles/studio/helpers/helpers.ts b/frontend/src/bundles/studio/helpers/helpers.ts
@@ -1,4 +1,5 @@
 export { getDestinationPointerValue } from './get-destination-pointer-value.js';
+export { getElementEnd } from './get-element-end.js';
 export { getNewItemIndexBySpan } from './get-new-item-index.js';
 export { reorderItemsByIndexes } from './reorder-items.js';
 export { setItemsSpan } from './set-items-span.js';
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
@@ -80,6 +80,10 @@ const components = {
                 color: colors.typography[600],
                 bgColor: colors.background[50],
             },
+            light: {
+                color: colors.background[50],
+                bgColor: colors.white,
+            },
             primaryOutlined: {
                 color: colors.background[300],
                 border: '1px solid',
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { Control } from './control/control.js';
		export { TimeDisplay } from './time-display/time-display.js';