fix: DEV-3405: Move zoom buttons to video's control panel

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,10 @@ export const Controls: FC<TimelineControlsProps> = memo(({
     return (position - 1) / frameRate;
   }, [position, frameRate]);
 
+  const customControls = useCustomControls(props.customControls);
+
+  console.log({ customControls });
+
   const stepHandlerWrapper = (handler: TimelineControlsStepHandler, stepSize?: TimelineStepFunction) => (e: MouseEvent<HTMLButtonElement>) => {
     handler(e, stepSize ?? undefined);
   };
@@ -101,13 +105,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?.['left-center']}
           <AltControls
             showAlterantive={altControlsMode && !disableFrames}
             main={(
@@ -193,6 +199,7 @@ export const Controls: FC<TimelineControlsProps> = memo(({
               </>
             )}
           />
+          {customControls?.['right-center']}
         </Elem>
         <Elem name="group" tag={Space} collapsed>
           {!disableFrames && allowViewCollapse && (
@@ -219,6 +226,7 @@ export const Controls: FC<TimelineControlsProps> = memo(({
       </Elem>
 
       <Elem name="group" tag={Space} size="small">
+        {customControls?.['right']}
         <TimeDisplay
           currentTime={currentTime}
           duration={duration}
@@ -304,3 +312,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" | "left-center" | "right-center";
+  component: JSX.Element | (() => JSX.Element);
+}
+
 export interface TimelineSideControlProps {
   position?: number;
   length?: number;

src/env/development.js

@@ -68,7 +68,7 @@ import { TimeSeriesSingle } from "../examples/timeseries_single";
  */
 // import { AllTypes } from "../examples/all_types";
 
-const data = AudioRegions;
+const data = VideoRectangles;
 
 function getData(task) {
   if (task && task.data) {

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}
@@ -385,6 +369,28 @@ const HtxVideoView = ({ item }) => {
             disableView={!supportsRegions}
             framerate={item.framerate}
             controls={{ FramesControl: true }}
+            customControls={[
+              {
+                position: "left",
+                component: () => {
+                  return (
+                    <Dropdown.Trigger
+                      inline={isFullScreen}
+                      content={(
+                        <Menu size="medium" style={{ width: 150, minWidth: 0 }} 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" style={{ padding: 0 }}><IconZoomIn/></Button>
+                    </Dropdown.Trigger>
+                  );
+                },
+              },
+            ]}
             onPositionChange={handleTimelinePositionChange}
             onPlay={handlePlay}
             onPause={handlePause}