add type for keyframe-based video annotation, add type for video frame

support. Restrcuture reducers

Author: seveibar

src/Annotator/index.js

@@ -10,7 +10,12 @@ import type {
  Action
 } from "../MainLayout/types"
 import SettingsProvider from "../SettingsProvider"
-import reducer from "./reducer"
+
+import combineReducers from "./reducers/combine-reducers.js"
+import generalReducer from "./reducers/general-reducer.js"
+import imageReducer from "./reducers/image-reducer.js"
+import videoReducer from "./reducers/video-reducer.js"
+
 import makeImmutable from "seamless-immutable"
 
 type Props = {
@@ -32,7 +37,8 @@ type Props = {
 export const Annotator = ({
  images,
  allowedArea,
- selectedImage = images.length > 0 ? images[0].src : undefined,
+ selectedImage = images && images.length > 0 ? images[0].src : undefined,
+ selectedVideoTime = 0,
  showPointDistances,
  pointDistancePrecision,
  showTags = true,
@@ -42,10 +48,13 @@ export const Annotator = ({
  imageTagList = [],
  imageClsList = [],
  taskDescription,
+ videoSrc,
  onExit
 }: Props) => {
+ if (!images) return 'Missing required prop "images" or "videoSrc"'
  const [state, dispatchToReducer] = useReducer(
- reducer,
+ combineReducers(generalReducer),
+ // reducer,
  makeImmutable({
  showTags,
  allowedArea,
@@ -82,7 +91,7 @@ export const Annotator = ({
 
  return (
  <SettingsProvider>
- <MainLayout debug state={state} dispatch={dispatch} />
+ <MainLayout state={state} dispatch={dispatch} />
  </SettingsProvider>
  )
 }

src/Annotator/reducers/combine-reducers.js

@@ -0,0 +1,6 @@
+export default (...reducers) => (state, action) => {
+ for (const reducer of reducers) {
+ state = reducer(state, action)
+ }
+ return state
+}

src/Annotator/reducer.js renamed to src/Annotator/reducers/general-reducer.js

@@ -1,7 +1,7 @@
 // @flow
 
-import type { MainLayoutState, Action } from "../MainLayout/types"
-import { moveRegion } from "../ImageCanvas/region-tools.js"
+import type { MainLayoutState, Action } from "../../MainLayout/types"
+import { moveRegion } from "../../ImageCanvas/region-tools.js"
 import { setIn, updateIn } from "seamless-immutable"
 import moment from "moment"
 import isEqual from "lodash/isEqual"
@@ -28,13 +28,11 @@ const typesToSaveWithHistory = {
  DELETE_REGION: "Delete Region"
 }
 
-let lastMouseMoveCall = Date.now()
-
 export default (state: MainLayoutState, action: Action) => {
  // Throttle certain actions
  if (action.type === "MOUSE_MOVE") {
- if (Date.now() - lastMouseMoveCall < 16) return state
- lastMouseMoveCall = Date.now()
+ if (Date.now() - ((state: any).lastMouseMoveCall || 0) < 16) return state
+ state = setIn(state, ["lastMouseMoveCall"], Date.now())
  }
  if (!action.type.includes("MOUSE")) {
  state = setIn(state, ["lastAction"], action)
@@ -554,7 +552,6 @@ export default (state: MainLayoutState, action: Action) => {
  }
  }
  return state
- // return setIn(state, [""]
  }
  case "SELECT_TOOL": {
  state = setIn(state, ["mode"], null)

src/Annotator/reducers/image-reducer.js

@@ -0,0 +1,10 @@
+// @flow
+
+import type {
+ MainLayoutImageAnnotationState,
+ Action
+} from "../../MainLayout/types"
+
+export default (state: MainLayoutState, action: Action) => {
+ return state
+}

src/Annotator/reducers/video-reducer.js

@@ -0,0 +1,10 @@
+// @flow
+
+import type {
+ MainLayoutVideoAnnotationState,
+ Action
+} from "../../MainLayout/types"
+
+export default (state: MainLayoutVideoAnnotationState, action: Action) => {
+ return state
+}

src/MainLayout/types.js

@@ -22,7 +22,8 @@ export type Image = {
  name: string,
  regions?: Array<Region>,
  pixelSize?: { w: number, h: number },
- realSize?: { w: number, h: number, unitName: string }
+ realSize?: { w: number, h: number, unitName: string },
+ videoTime?: number
 }
 
 export type Mode =
@@ -39,19 +40,17 @@ export type Mode =
  |}
  | {| mode: "MOVE_REGION" |}
 
-export type MainLayoutState = {|
+export type MainLayoutStateBase = {|
+ annotationType: "video" | "image",
  fullScreen?: boolean,
  settingsOpen?: boolean,
  minRegionSize?: number,
  showTags: boolean,
  showPointDistances?: boolean,
  pointDistancePrecision?: number,
- selectedImage?: string,
  selectedTool: ToolEnum,
  mode: Mode,
  taskDescription: string,
- images: Array<Image>,
- labelImages?: boolean,
  allowedArea?: { x: number, y: number, w: number, h: number },
  regionClsList?: Array<string>,
  regionTagList?: Array<string>,
@@ -61,6 +60,38 @@ export type MainLayoutState = {|
  history: Array<{ time: Date, state: MainLayoutState, name: string }>
 |}
 
+export type MainLayoutImageAnnotationState = {|
+ ...MainLayoutStateBase,
+ annotationType: "image",
+
+ selectedImage?: string,
+ images: Array<Image>,
+ labelImages?: boolean,
+
+ // If the selectedImage corresponds to a frame of a video
+ selectedVideoTime?: number
+|}
+
+export type MainLayoutVideoAnnotationState = {|
+ ...MainLayoutStateBase,
+ annotationType: "video",
+
+ videoSrc: string,
+ currentVideoTime: number,
+ keyframes: {
+ [time: number]: {
+ time: number,
+ regions: Array<Region>
+ }
+ },
+ pixelSize?: { w: number, h: number },
+ realSize?: { w: number, h: number, unitName: string }
+|}
+
+export type MainLayoutState =
+ | MainLayoutImageAnnotationState
+ | MainLayoutVideoAnnotationState
+
 export type Action =
  | {| type: "@@INIT" |}
  | {| type: "SELECT_IMAGE", image: Image |}