@searpent/react-image-annotate 2.0.77 → 2.0.78

package/MainLayout/index.js

@@ -0,0 +1,526 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
+import React, { useCallback, useMemo, useRef } from "react";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { styled } from "@mui/material/styles";
+import ClassSelectionMenu from "../ClassSelectionMenu";
+import DebugBox from "../DebugSidebarBox";
+import HistorySidebarBox from "../HistorySidebarBox";
+import ImageCanvas from "../ImageCanvas";
+import ImageSelector from "../ImageSelectorSidebarBox";
+import GroupSelector from "../GroupSelectorSidebarBox";
+import KeyframeTimeline from "../KeyframeTimeline";
+import KeyframesSelector from "../KeyframesSelectorSidebarBox";
+import RegionSelector from "../RegionSelectorSidebarBox";
+import SettingsDialog from "../SettingsDialog";
+import TagsSidebarBox from "../TagsSidebarBox";
+import TaskDescription from "../TaskDescriptionSidebarBox";
+import Help from "../HelpSidebarBox";
+import MetadataEditor from "../MetadataEditorSidebarBox";
+import GroupsEditor from "../GroupsEditorSidebarBox";
+import Workspace from "react-material-workspace-layout/Workspace";
+import classnames from "classnames";
+import getActiveImage from "../Annotator/reducers/get-active-image";
+import getHotkeyHelpText from "../utils/get-hotkey-help-text";
+import iconDictionary from "./icon-dictionary";
+import styles from "./styles";
+import { useDispatchHotkeyHandlers } from "../ShortcutsManager";
+import useEventCallback from "use-event-callback";
+import useImpliedVideoRegions from "./use-implied-video-regions";
+import useKey from "use-key-hook";
+import { useSettings } from "../SettingsProvider";
+import { withHotKeys } from "react-hotkeys";
+import Editor from "../Editor";
+import regionsToBlocks from '../utils/regions-to-blocks';
+import PageSelector from "../PageSelector";
+import regionsGroups from '../utils/regions-groups';
+import RightSidebarItemsWrapper from './RightSidebarItemsWrapper';
+import Locker from '../Locker';
+import { reacalcActionsEnum } from "../utils/saveable-actions-enum";
+import intersection from "lodash/intersection";
+import useColors from '../hooks/use-colors'; // import Fullscreen from "../Fullscreen"
+
+var emptyArr = [];
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return styles;
+});
+var HotkeyDiv = withHotKeys(function (_ref) {
+  var hotKeys = _ref.hotKeys,
+      children = _ref.children,
+      divRef = _ref.divRef,
+      props = _objectWithoutProperties(_ref, ["hotKeys", "children", "divRef"]);
+
+  return React.createElement("div", Object.assign({}, _objectSpread({}, hotKeys, props), {
+    ref: divRef
+  }), children);
+});
+var FullScreenContainer = styled("div")(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: "100%",
+    height: "100%",
+    "& .fullscreen": {
+      width: "100%",
+      height: "100%"
+    }
+  };
+});
+var WorkspaceWrapper = styled("div")(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    height: "100vh",
+    width: "auto",
+    backgroundColor: "red",
+    flex: 1
+  };
+});
+var EditorWrapper = styled("div")(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    padding: "1rem",
+    paddingLeft: "2rem",
+    height: "100vh",
+    width: "30vw",
+    overflowY: "scroll"
+  };
+});
+export var MainLayout = function MainLayout(_ref5) {
+  var _state$images$state$s, _state$images$state$s2, _state$images$state$s3, _state$images$state$s4, _state$images$state$s5;
+
+  var state = _ref5.state,
+      dispatch = _ref5.dispatch,
+      _ref5$alwaysShowNextB = _ref5.alwaysShowNextButton,
+      alwaysShowNextButton = _ref5$alwaysShowNextB === void 0 ? false : _ref5$alwaysShowNextB,
+      _ref5$alwaysShowPrevB = _ref5.alwaysShowPrevButton,
+      alwaysShowPrevButton = _ref5$alwaysShowPrevB === void 0 ? false : _ref5$alwaysShowPrevB,
+      RegionEditLabel = _ref5.RegionEditLabel,
+      onRegionClassAdded = _ref5.onRegionClassAdded,
+      hideHeader = _ref5.hideHeader,
+      hideHeaderText = _ref5.hideHeaderText,
+      _ref5$hideNext = _ref5.hideNext,
+      hideNext = _ref5$hideNext === void 0 ? false : _ref5$hideNext,
+      _ref5$hidePrev = _ref5.hidePrev,
+      hidePrev = _ref5$hidePrev === void 0 ? false : _ref5$hidePrev,
+      _ref5$hideClone = _ref5.hideClone,
+      hideClone = _ref5$hideClone === void 0 ? false : _ref5$hideClone,
+      _ref5$hideSettings = _ref5.hideSettings,
+      hideSettings = _ref5$hideSettings === void 0 ? false : _ref5$hideSettings,
+      _ref5$hideFullScreen = _ref5.hideFullScreen,
+      hideFullScreen = _ref5$hideFullScreen === void 0 ? false : _ref5$hideFullScreen,
+      _ref5$hideSave = _ref5.hideSave,
+      hideSave = _ref5$hideSave === void 0 ? false : _ref5$hideSave,
+      _ref5$groups = _ref5.groups,
+      groups = _ref5$groups === void 0 ? [] : _ref5$groups,
+      _ref5$onGroupSelect = _ref5.onGroupSelect,
+      onGroupSelect = _ref5$onGroupSelect === void 0 ? function () {} : _ref5$onGroupSelect,
+      _ref5$hideHistory = _ref5.hideHistory,
+      hideHistory = _ref5$hideHistory === void 0 ? false : _ref5$hideHistory,
+      _ref5$hideNotEditingL = _ref5.hideNotEditingLabel,
+      hideNotEditingLabel = _ref5$hideNotEditingL === void 0 ? false : _ref5$hideNotEditingL,
+      _ref5$showEditor = _ref5.showEditor,
+      showEditor = _ref5$showEditor === void 0 ? false : _ref5$showEditor,
+      _ref5$showPageSelecto = _ref5.showPageSelector,
+      showPageSelector = _ref5$showPageSelecto === void 0 ? false : _ref5$showPageSelecto,
+      _ref5$recalcActive = _ref5.recalcActive,
+      recalcActive = _ref5$recalcActive === void 0 ? false : _ref5$recalcActive,
+      _ref5$saveActive = _ref5.saveActive,
+      saveActive = _ref5$saveActive === void 0 ? false : _ref5$saveActive,
+      onMetadataChange = _ref5.onMetadataChange,
+      onAddGroup = _ref5.onAddGroup,
+      onRecalcClick = _ref5.onRecalcClick;
+  var classes = useStyles();
+  var settings = useSettings();
+  var fullScreenHandle = useFullScreenHandle();
+
+  var _useColors = useColors(),
+      clsColor = _useColors.clsColor;
+
+  var memoizedActionFns = useRef({});
+
+  var action = function action(type) {
+    for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      params[_key - 1] = arguments[_key];
+    }
+
+    var fnKey = "".concat(type, "(").concat(params.join(","), ")");
+    if (memoizedActionFns.current[fnKey]) return memoizedActionFns.current[fnKey];
+
+    var fn = function fn() {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+
+      return params.length > 0 ? dispatch(_objectSpread({
+        type: type
+      }, params.reduce(function (acc, p, i) {
+        return acc[p] = args[i], acc;
+      }, {}))) : dispatch(_objectSpread({
+        type: type
+      }, args[0]));
+    };
+
+    memoizedActionFns.current[fnKey] = fn;
+    return fn;
+  };
+
+  var _getActiveImage = getActiveImage(state),
+      currentImageIndex = _getActiveImage.currentImageIndex,
+      activeImage = _getActiveImage.activeImage;
+
+  var nextImage;
+
+  if (currentImageIndex !== null) {
+    nextImage = state.images[currentImageIndex + 1];
+  }
+
+  useKey(function () {
+    return dispatch({
+      type: "CANCEL"
+    });
+  }, {
+    detectKeys: [27]
+  });
+  var isAVideoFrame = activeImage && activeImage.frameTime !== undefined;
+  var innerContainerRef = useRef();
+  var hotkeyHandlers = useDispatchHotkeyHandlers({
+    dispatch: dispatch
+  });
+  var impliedVideoRegions = useImpliedVideoRegions(state);
+  var refocusOnMouseEvent = useCallback(function (e) {
+    if (!innerContainerRef.current) return;
+    if (innerContainerRef.current.contains(document.activeElement)) return;
+
+    if (innerContainerRef.current.contains(e.target)) {
+      innerContainerRef.current.focus();
+      e.target.focus();
+    }
+  }, []);
+  var allowedGroups = useMemo(function () {
+    return regionsGroups(state.images[state.selectedImage].regions);
+  }, [state.images, state.selectedImage]);
+  var canvas = React.createElement(ImageCanvas, Object.assign({}, settings, {
+    showCrosshairs: settings.showCrosshairs && !["select", "pan", "zoom"].includes(state.selectedTool),
+    key: state.selectedImage,
+    showMask: state.showMask,
+    fullImageSegmentationMode: state.fullImageSegmentationMode,
+    autoSegmentationOptions: state.autoSegmentationOptions,
+    showTags: state.showTags,
+    allowedArea: state.allowedArea,
+    modifyingAllowedArea: state.selectedTool === "modify-allowed-area",
+    regionClsList: state.regionClsList,
+    regionTagList: state.regionTagList,
+    regions: state.annotationType === "image" ? activeImage.regions || [] : impliedVideoRegions,
+    realSize: activeImage ? activeImage.realSize : undefined,
+    videoPlaying: state.videoPlaying,
+    imageSrc: state.annotationType === "image" ? activeImage.src : null,
+    videoSrc: state.annotationType === "video" ? state.videoSrc : null,
+    pointDistancePrecision: state.pointDistancePrecision,
+    createWithPrimary: state.selectedTool.includes("create"),
+    dragWithPrimary: state.selectedTool === "pan",
+    zoomWithPrimary: state.selectedTool === "zoom",
+    showPointDistances: state.showPointDistances,
+    videoTime: state.annotationType === "image" ? state.selectedImageFrameTime : state.currentVideoTime,
+    keypointDefinitions: state.keypointDefinitions,
+    onMouseMove: action("MOUSE_MOVE"),
+    onMouseDown: action("MOUSE_DOWN"),
+    onMouseUp: action("MOUSE_UP"),
+    onChangeRegion: action("CHANGE_REGION", "region"),
+    onBeginRegionEdit: action("OPEN_REGION_EDITOR", "region"),
+    onCloseRegionEdit: action("CLOSE_REGION_EDITOR", "region"),
+    onDeleteRegion: action("DELETE_REGION", "region"),
+    onDeleteGroup: action("DELETE_GROUP", "groupId"),
+    onBeginBoxTransform: action("BEGIN_BOX_TRANSFORM", "box", "directions"),
+    onResetZoom: function onResetZoom() {
+      return dispatch({
+        type: "ZOOM_RESET"
+      });
+    },
+    onBeginMovePolygonPoint: action("BEGIN_MOVE_POLYGON_POINT", "polygon", "pointIndex"),
+    onBeginMoveKeypoint: action("BEGIN_MOVE_KEYPOINT", "region", "keypointId"),
+    onAddPolygonPoint: action("ADD_POLYGON_POINT", "polygon", "point", "pointIndex"),
+    onSelectRegion: action("SELECT_REGION", "region"),
+    onBeginMovePoint: action("BEGIN_MOVE_POINT", "point"),
+    onImageLoaded: action("IMAGE_LOADED", "image"),
+    RegionEditLabel: RegionEditLabel,
+    onImageOrVideoLoaded: action("IMAGE_OR_VIDEO_LOADED", "metadata"),
+    onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
+    onChangeVideoPlaying: action("CHANGE_VIDEO_PLAYING", "isPlaying"),
+    onRegionClassAdded: onRegionClassAdded,
+    allowComments: state.allowComments,
+    hideNotEditingLabel: hideNotEditingLabel,
+    allowedGroups: allowedGroups
+  }));
+  var onClickIconSidebarItem = useEventCallback(function (item) {
+    dispatch({
+      type: "SELECT_TOOL",
+      selectedTool: item.name
+    });
+  });
+  var onClickHeaderItem = useEventCallback(function (item) {
+    if (item.name === "Fullscreen") {
+      fullScreenHandle.enter();
+    } else if (item.name === "Window") {
+      fullScreenHandle.exit();
+    }
+
+    dispatch({
+      type: "HEADER_BUTTON_CLICKED",
+      buttonName: item.name
+    });
+  });
+  var debugModeOn = Boolean(window.localStorage.$ANNOTATE_DEBUG_MODE && state);
+  var nextImageHasRegions = !nextImage || nextImage.regions && nextImage.regions.length > 0; // Editor.js blocks
+
+  var selectedGroupId = ((_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.selectedGroupId) || null;
+  var extractionEngineRegions = (((_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : _state$images$state$s2.regions) || []).filter(function (r) {
+    return r.cls !== 'metadata';
+  });
+  var editorBlocks = regionsToBlocks(extractionEngineRegions, clsColor);
+  var blocks = editorBlocks.filter(function (i) {
+    var _i$data;
+
+    return (i === null || i === void 0 ? void 0 : (_i$data = i.data) === null || _i$data === void 0 ? void 0 : _i$data.groupId) === selectedGroupId;
+  });
+
+  var handleEditorChange = function handleEditorChange(_ref6) {
+    var imageIndex = _ref6.imageIndex,
+        data = _ref6.data;
+    var newRegions = data.blocks.map(function (i) {
+      return {
+        id: i.id,
+        cls: i.data.labelName,
+        text: i.data.text
+      };
+    });
+    dispatch({
+      type: "UPDATE_REGIONS",
+      regions: newRegions,
+      imageIndex: imageIndex
+    });
+  };
+
+  var pages = state.images.map(function (i, idx) {
+    var _i$metadata, _i$metadata$find;
+
+    return {
+      id: "".concat(i.id),
+      src: i.thumbnail,
+      isActive: idx === state.selectedImage,
+      pageNumber: (i === null || i === void 0 ? void 0 : (_i$metadata = i.metadata) === null || _i$metadata === void 0 ? void 0 : (_i$metadata$find = _i$metadata.find(function (md) {
+        return md.key === "pageNumber";
+      })) === null || _i$metadata$find === void 0 ? void 0 : _i$metadata$find.value) || null,
+      metadata: i.metadata || [],
+      lockedUntil: i.lockedUntil,
+      syncError: i.syncError || null,
+      isRecalcReady: intersection(reacalcActionsEnum, state.images[idx].saveableActions).length > 0
+    };
+  });
+
+  var handlePageClick = function handlePageClick(pageIndex) {
+    dispatch({
+      type: "SELECT_IMAGE",
+      imageIndex: pageIndex
+    });
+  };
+
+  var isSelectedImageLocked = ((_state$images$state$s3 = state.images[state.selectedImage]) === null || _state$images$state$s3 === void 0 ? void 0 : _state$images$state$s3.lockedUntil) ? true : false;
+  var selectedFrame = ((_state$images$state$s4 = state.images[state.selectedImage]) === null || _state$images$state$s4 === void 0 ? void 0 : (_state$images$state$s5 = _state$images$state$s4.regions.find(function (i) {
+    return i.highlighted === true;
+  })) === null || _state$images$state$s5 === void 0 ? void 0 : _state$images$state$s5.id) || '';
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(FullScreenContainer, null, React.createElement(FullScreen, {
+    handle: fullScreenHandle,
+    onChange: function onChange(open) {
+      if (!open) {
+        fullScreenHandle.exit();
+        action("HEADER_BUTTON_CLICKED", "buttonName")("Window");
+      }
+    }
+  }, React.createElement(HotkeyDiv, {
+    tabIndex: -1,
+    divRef: innerContainerRef,
+    onMouseDown: refocusOnMouseEvent,
+    onMouseOver: refocusOnMouseEvent,
+    allowChanges: true,
+    handlers: hotkeyHandlers,
+    className: classnames(classes.container, state.fullScreen && "Fullscreen")
+  }, React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  }, showPageSelector && React.createElement(PageSelector, {
+    pages: pages,
+    onPageClick: handlePageClick,
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: state.metadataConfigs || [],
+    onRecalcClick: onRecalcClick
+  }), React.createElement(WorkspaceWrapper, null, React.createElement(Workspace, {
+    style: {
+      width: "auto"
+    },
+    allowFullscreen: true,
+    iconDictionary: iconDictionary,
+    hideHeader: hideHeader,
+    hideHeaderText: hideHeaderText,
+    headerLeftSide: [state.annotationType === "video" ? React.createElement(KeyframeTimeline, {
+      currentTime: state.currentVideoTime,
+      duration: state.videoDuration,
+      onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
+      keyframes: state.keyframes
+    }) : activeImage ? React.createElement("div", {
+      className: classes.headerTitle
+    }, activeImage.name) : null].filter(Boolean),
+    headerItems: [!hidePrev && {
+      name: "Prev"
+    }, !hideNext && {
+      name: "Next"
+    }, state.annotationType !== "video" ? null : !state.videoPlaying ? {
+      name: "Play"
+    } : {
+      name: "Pause"
+    }, !hideClone && !nextImageHasRegions && activeImage.regions && {
+      name: "Clone"
+    }, !hideSettings && {
+      name: "Settings"
+    }, !hideFullScreen && (state.fullScreen ? {
+      name: "Window"
+    } : {
+      name: "Fullscreen"
+    }), !hideSave && {
+      name: "Save"
+    }].filter(Boolean),
+    onClickHeaderItem: onClickHeaderItem,
+    onClickIconSidebarItem: onClickIconSidebarItem,
+    selectedTools: [state.selectedTool, state.showTags && "show-tags", state.showMask && "show-mask"].filter(Boolean),
+    iconSidebarItems: !state.enabledTools ? [] : [{
+      name: "select",
+      helperText: "Select" + getHotkeyHelpText("select_tool"),
+      alwaysShowing: false
+    }, {
+      name: "pan",
+      helperText: "Drag/Pan (right or middle click)" + getHotkeyHelpText("pan_tool"),
+      alwaysShowing: false
+    }, {
+      name: "zoom",
+      helperText: "Zoom In/Out (scroll)" + getHotkeyHelpText("zoom_tool"),
+      alwaysShowing: false
+    }, {
+      name: "show-tags",
+      helperText: "Show / Hide Tags",
+      alwaysShowing: false
+    }, {
+      name: "create-point",
+      helperText: "Add Point" + getHotkeyHelpText("create_point")
+    }, {
+      name: "create-box",
+      helperText: "Add Bounding Box" + getHotkeyHelpText("create_bounding_box")
+    }, {
+      name: "create-polygon",
+      helperText: "Add Polygon" + getHotkeyHelpText("create_polygon")
+    }, {
+      name: "create-line",
+      helperText: "Add Line"
+    }, {
+      name: "create-expanding-line",
+      helperText: "Add Expanding Line"
+    }, {
+      name: "create-keypoints",
+      helperText: "Add Keypoints (Pose)"
+    }, state.fullImageSegmentationMode && {
+      name: "show-mask",
+      alwaysShowing: false,
+      helperText: "Show / Hide Mask"
+    }, {
+      name: "modify-allowed-area",
+      helperText: "Modify Allowed Area"
+    }].filter(Boolean).filter(function (a) {
+      return a.alwaysShowing || state.enabledTools.includes(a.name);
+    }),
+    rightSidebarItems: [React.createElement(RightSidebarItemsWrapper, null, [isSelectedImageLocked && React.createElement(Locker, null), debugModeOn && React.createElement(DebugBox, {
+      state: debugModeOn,
+      lastAction: state.lastAction,
+      key: "debug-box"
+    }), state.taskDescription && React.createElement(TaskDescription, {
+      description: state.taskDescription,
+      key: "task-description"
+    }), state.help && React.createElement(Help, {
+      help: state.help,
+      key: "help"
+    }), state.regionClsList && React.createElement(ClassSelectionMenu, {
+      selectedCls: state.selectedCls,
+      regionClsList: state.regionClsList,
+      onSelectCls: action("SELECT_CLASSIFICATION", "cls"),
+      key: "class-selection-menu"
+    }), state.labelImages && React.createElement(TagsSidebarBox, {
+      currentImage: activeImage,
+      imageClsList: state.imageClsList,
+      imageTagList: state.imageTagList,
+      onChangeImage: action("CHANGE_IMAGE", "delta"),
+      expandedByDefault: true,
+      key: "tags-sidebar-box"
+    }),, // (state.images?.length || 0) > 1 && (
+    //   <ImageSelector
+    //     onSelect={action("SELECT_REGION", "region")}
+    //     images={state.images}
+    //   />
+    // ),
+    // groups && (
+    //   <GroupSelector
+    //     title="Articles"
+    //     groups={groups}
+    //     selectedGroupId={selectedGroupId}
+    //     onSelect={onGroupSelect}
+    //   />
+    // )
+    React.createElement(RegionSelector, {
+      regions: activeImage ? activeImage.regions : emptyArr,
+      onSelectRegion: action("SELECT_REGION", "region"),
+      onDeleteRegion: action("DELETE_REGION", "region"),
+      onChangeRegion: action("CHANGE_REGION", "region"),
+      key: "region-selector"
+    }), state.keyframes && React.createElement(KeyframesSelector, {
+      onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
+      onDeleteKeyframe: action("DELETE_KEYFRAME", "time"),
+      onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
+      currentTime: state.currentVideoTime,
+      duration: state.videoDuration,
+      keyframes: state.keyframes,
+      key: "key-frame-selector"
+    }), !hideHistory && React.createElement(HistorySidebarBox, {
+      history: state.history,
+      onRestoreHistory: action("RESTORE_HISTORY"),
+      key: "history-sidebar"
+    }), React.createElement(MetadataEditor, {
+      state: state,
+      onMetadataChange: onMetadataChange,
+      key: "metadata-editor"
+    }), React.createElement(GroupsEditor, {
+      groups: allowedGroups,
+      onAddGroup: onAddGroup,
+      key: "groups-editor"
+    })].filter(Boolean))]
+  }, isSelectedImageLocked && React.createElement(Locker, null), canvas)), showEditor && !isSelectedImageLocked && React.createElement(EditorWrapper, {
+    id: "editor-wrapper"
+  }, React.createElement(Editor, {
+    id: "editor",
+    blocks: blocks,
+    imageIndex: state.selectedImage,
+    key: "".concat(state.selectedImage, "#").concat(selectedGroupId),
+    selectedFrame: selectedFrame,
+    onChange: handleEditorChange
+  }))), React.createElement(SettingsDialog, {
+    open: state.settingsOpen,
+    onClose: function onClose() {
+      return dispatch({
+        type: "HEADER_BUTTON_CLICKED",
+        buttonName: "Settings"
+      });
+    }
+  })))));
+};
+export default MainLayout;

package/{src/MainLayout → MainLayout}/styles.js

@@ -1,5 +1,4 @@
-import { grey } from "@mui/material/colors"
-
+import { grey } from "@mui/material/colors";
 export default {
   container: {
     display: "flex",
@@ -15,12 +14,12 @@ export default {
       left: 0,
       right: 0,
       top: 0,
-      bottom: 0,
-    },
+      bottom: 0
+    }
   },
   headerTitle: {
     fontWeight: "bold",
     color: grey[700],
-    paddingLeft: 16,
-  },
-}
+    paddingLeft: 16
+  }
+};

package/MainLayout/use-implied-video-regions.js

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+import getImpliedVideoRegions from "../Annotator/reducers/get-implied-video-regions.js";
+var emptyArr = [];
+export default (function (state) {
+  if (state.annotationType !== "video") return emptyArr;
+  var keyframes = state.keyframes,
+      _state$currentVideoTi = state.currentVideoTime,
+      currentVideoTime = _state$currentVideoTi === void 0 ? 0 : _state$currentVideoTi; // TODO memoize
+
+  return useMemo(function () {
+    return getImpliedVideoRegions(keyframes, currentVideoTime);
+  }, [keyframes, currentVideoTime]);
+});