fix: DEV-3405: Move zoom buttons to video's control panel (#847)

* Move zoom buttons to video's control panel

* Fixes as per the review

* Update src/components/Timeline/Controls.tsx

Co-authored-by: yyassi-heartex <[email protected]>

Author: nick-skriabin

src/common/Button/Button.styl

@@ -114,7 +114,7 @@
       background none
       padding 21px 54px
       font-size 13px
-      
+
     &_alt
       --button-color #000
       box-shadow none
@@ -181,6 +181,9 @@
     margin-left 10px
     margin-right -10px
 
+  &_nopadding
+    padding 0
+
   &_withIcon
     justify-content space-between
 

src/common/Button/Button.tsx

@@ -26,6 +26,7 @@ export interface ButtonProps extends HTMLButtonProps {
   style?: CSSProperties;
   hotkey?: keyof typeof Hotkey.keymap;
   tooltip?: string;
+  nopadding?: boolean;
 }
 
 export interface ButtonGroupProps {
@@ -51,6 +52,7 @@ export const Button: ButtonType<ButtonProps> = forwardRef(({
   danger,
   hotkey,
   tooltip,
+  nopadding,
   ...rest
 }, ref) => {
   const finalTag = tag ?? (rest.href ? "a" : "button");
@@ -60,6 +62,7 @@ export const Button: ButtonType<ButtonProps> = forwardRef(({
     waiting,
     type,
     danger,
+    nopadding,
     look: look ?? [],
     withIcon: !!icon,
     withExtra: !!extra,

src/components/Timeline/Controls.tsx

@@ -7,7 +7,7 @@ import { isDefined } from "../../utils/utilities";
 import { TimelineContext } from "./Context";
 import "./Controls.styl";
 import * as SideControls from "./SideControls";
-import { TimelineControlsFormatterOptions, TimelineControlsProps, TimelineControlsStepHandler, TimelineProps, TimelineStepFunction } from "./Types";
+import { TimelineControlsFormatterOptions, TimelineControlsProps, TimelineControlsStepHandler, TimelineCustomControls, TimelineProps, TimelineStepFunction } from "./Types";
 
 const positionFromTime = ({ time, fps }: TimelineControlsFormatterOptions) => {
   const roundedFps = Math.round(fps).toString();
@@ -53,6 +53,7 @@ export const Controls: FC<TimelineControlsProps> = memo(({
     return (position - 1) / frameRate;
   }, [position, frameRate]);
 
+  const customControls = useCustomControls(props.customControls);
   const stepHandlerWrapper = (handler: TimelineControlsStepHandler, stepSize?: TimelineStepFunction) => (e: MouseEvent<HTMLButtonElement>) => {
     handler(e, stepSize ?? undefined);
   };
@@ -101,13 +102,15 @@ export const Controls: FC<TimelineControlsProps> = memo(({
             />
           );
         })}
+        {customControls?.left}
       </Elem>
 
       <Elem name="main-controls">
         <Elem name="group" tag={Space} collapsed>
           {extraControls}
         </Elem>
         <Elem name="group" tag={Space} collapsed>
+          {customControls?.leftCenter}
           <AltControls
             showAlterantive={altControlsMode && !disableFrames}
             main={(
@@ -193,6 +196,7 @@ export const Controls: FC<TimelineControlsProps> = memo(({
               </>
             )}
           />
+          {customControls?.rightCenter}
         </Elem>
         <Elem name="group" tag={Space} collapsed>
           {!disableFrames && allowViewCollapse && (
@@ -219,6 +223,7 @@ export const Controls: FC<TimelineControlsProps> = memo(({
       </Elem>
 
       <Elem name="group" tag={Space} size="small">
+        {customControls?.right}
         <TimeDisplay
           currentTime={currentTime}
           duration={duration}
@@ -304,3 +309,22 @@ const AltControls: FC<AltControlsProps> = (props) => {
   return props.showAlterantive ? props.alt : props.main;
 };
 
+type ControlGroups = Record<TimelineCustomControls["position"], JSX.Element[]>;
+
+const useCustomControls = (
+  customControls?: TimelineCustomControls[],
+): ControlGroups | null => {
+  if (!customControls) return null;
+
+  const groups = customControls?.reduce<ControlGroups>((groups, item) => {
+    const group = groups[item.position] ?? [];
+    const component = item.component instanceof Function ? item.component() : item.component;
+
+    group.push(component);
+    groups[item.position] = group;
+
+    return groups;
+  }, {} as ControlGroups);
+
+  return groups;
+};

src/components/Timeline/Timeline.tsx

@@ -126,6 +126,7 @@ const TimelineComponent: FC<TimelineProps> = ({
         playing={playing}
         volume={props.volume}
         controls={props.controls}
+        customControls={props.customControls}
         collapsed={viewCollapsed}
         onPlay={() => handlers.onPlay?.()}
         onPause={() => handlers.onPause?.()}

src/components/Timeline/Types.ts

@@ -28,6 +28,7 @@ export interface TimelineProps<D extends ViewTypes = "frames"> {
   data?: any;
   controlsOnTop?: boolean;
   controls?: TimelineControls;
+  customControls?: TimelineCustomControls[];
   onReady?: (data: Record<string, any>) => void;
   onPlay?: () => void;
   onPause?: () => void;
@@ -153,6 +154,7 @@ export interface TimelineControlsProps {
   allowFullscreen?: boolean;
   allowViewCollapse?: boolean;
   controls?: TimelineProps["controls"];
+  customControls?: TimelineCustomControls[];
   onRewind: (steps?: number) => void;
   onForward: (steps?: number) => void;
   onPositionChange: (position: number) => void;
@@ -166,6 +168,11 @@ export interface TimelineControlsProps {
   onVolumeChange: TimelineProps["onVolumeChange"];
 }
 
+export interface TimelineCustomControls {
+  position: "left" | "right" | "leftCenter" | "rightCenter";
+  component: JSX.Element | (() => JSX.Element);
+}
+
 export interface TimelineSideControlProps {
   position?: number;
   length?: number;

src/tags/object/Video/HtxVideo.js

@@ -18,6 +18,7 @@ import "./Video.styl";
 import { VideoRegions } from "./VideoRegions";
 import ResizeObserver from "../../../utils/resize-observer";
 import { useFullscreen } from "../../../hooks/useFullscreen";
+import { IconZoomIn } from "../../../assets/icons";
 
 // const hotkeys = Hotkey("Video", "Video Annotation");
 
@@ -310,23 +311,6 @@ const HtxVideoView = ({ item }) => {
         ))}
 
         <Block name="video" mod={{ fullscreen: isFullScreen }} ref={videoBlockRef}>
-          <Elem tag={Space} name="controls" align="end" size="small">
-            <Dropdown.Trigger
-              inline={isFullScreen}
-              content={(
-                <Menu size="medium" style={{ width: 150 }} closeDropdownOnItemClick={false}>
-                  <Menu.Item onClick={zoomIn}>Zoom In</Menu.Item>
-                  <Menu.Item onClick={zoomOut}>Zoom Out</Menu.Item>
-                  <Menu.Item onClick={zoomToFit}>Zoom To Fit</Menu.Item>
-                  <Menu.Item onClick={zoomReset}>Zoom 100%</Menu.Item>
-                </Menu>
-              )}
-            >
-              <Button size="small">
-                Zoom {Math.round(zoom * 100)}%
-              </Button>
-            </Dropdown.Trigger>
-          </Elem>
           <Elem
             name="main"
             ref={videoContainerRef}
@@ -386,6 +370,28 @@ const HtxVideoView = ({ item }) => {
             disableView={!supportsRegions}
             framerate={item.framerate}
             controls={{ FramesControl: true }}
+            customControls={[
+              {
+                position: "left",
+                component: () => {
+                  return (
+                    <Dropdown.Trigger
+                      inline={isFullScreen}
+                      content={(
+                        <Menu size="auto" closeDropdownOnItemClick={false}>
+                          <Menu.Item onClick={zoomIn}>Zoom In</Menu.Item>
+                          <Menu.Item onClick={zoomOut}>Zoom Out</Menu.Item>
+                          <Menu.Item onClick={zoomToFit}>Zoom To Fit</Menu.Item>
+                          <Menu.Item onClick={zoomReset}>Zoom 100%</Menu.Item>
+                        </Menu>
+                      )}
+                    >
+                      <Button size="small" nopadding><IconZoomIn/></Button>
+                    </Dropdown.Trigger>
+                  );
+                },
+              },
+            ]}
             onPositionChange={handleTimelinePositionChange}
             onPlay={handlePlay}
             onPause={handlePause}