fix: Merge pull request #80 from UniversalDataTool/fix/video-annotation-region-error

fix video region undefined error

Author: seveibar

src/Annotator/reducers/get-implied-video-regions.js

@@ -90,6 +90,8 @@ export default (
         }
         break
       }
+      default:
+        break
     }
   }
 

src/Annotator/reducers/video-reducer.js

@@ -12,7 +12,7 @@ export default (state: MainLayoutVideoAnnotationState, action: Action) => {
   const copyImpliedRegions = () => {
     return setIn(
       saveToHistory(state, "Add Keyframe"),
-      ["keyframes", state.currentVideoTime],
+      ["keyframes", state.currentVideoTime || 0],
       {
         regions: getImpliedVideoRegions(
           state.keyframes,
@@ -46,6 +46,8 @@ export default (state: MainLayoutVideoAnnotationState, action: Action) => {
     case "DELETE_KEYFRAME": {
       return setIn(state, ["keyframes"], without(state.keyframes, action.time))
     }
+    default:
+      break
   }
 
   // Before the user modifies regions, copy the interpolated regions over to a
@@ -55,8 +57,6 @@ export default (state: MainLayoutVideoAnnotationState, action: Action) => {
       case "BEGIN_BOX_TRANSFORM":
       case "BEGIN_MOVE_POINT":
       case "BEGIN_MOVE_POLYGON_POINT":
-      case "BEGIN_BOX_TRANSFORM":
-      case "BEGIN_MOVE_POLYGON_POINT":
       case "ADD_POLYGON_POINT":
       case "SELECT_REGION":
       case "CHANGE_REGION":
@@ -69,8 +69,13 @@ export default (state: MainLayoutVideoAnnotationState, action: Action) => {
           case "create-polygon":
           case "create-box":
             return copyImpliedRegions()
+          default:
+            break
         }
+        break
       }
+      default:
+        break
     }
   }
 

src/Annotator/video.story.js

@@ -0,0 +1,51 @@
+// @flow
+
+import React from "react"
+
+import { storiesOf } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+import Annotator from "./"
+
+storiesOf("Annotator(video)", module).add("Video Annotator", () => {
+  const props = {
+    regionClsList: ["valid", "invalid"],
+    enabledTools: ["select", "create-box", "create-polygon", "create-point"],
+    keyframes: {
+      "0": {
+        regions: [
+          {
+            id: "910517662556203",
+            cls: "valid",
+            color: "#f44336",
+            type: "box",
+            x: 0.12195121951219515,
+            y: 0.28726287262872624,
+            w: 0.2606707317073171,
+            h: 0.4769647696476965,
+          },
+        ],
+      },
+      "2656": {
+        regions: [
+          {
+            id: "910517662556203",
+            cls: "valid",
+            color: "#f44336",
+            type: "box",
+            x: 0.13109756097560976,
+            y: 0.08672086720867206,
+            w: 0.3445121951219512,
+            h: 0.7913279132791328,
+          },
+        ],
+      },
+    },
+    onExit: action("onExit"),
+    taskDescription: "",
+    videoName: "",
+    videoTime: 0,
+    videoSrc:
+      "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
+  }
+  return <Annotator {...props} />
+})

src/HistorySidebarBox/index.js

@@ -13,6 +13,7 @@ import UndoIcon from "@material-ui/icons/Undo"
 import moment from "moment"
 import { grey } from "@material-ui/core/colors"
 import isEqual from "lodash/isEqual"
+import Box from "@material-ui/core/Box"
 
 const useStyles = makeStyles({
   emptyText: {
@@ -24,6 +25,8 @@ const useStyles = makeStyles({
   },
 })
 
+const listItemTextStyle = { paddingLeft: 16 }
+
 export const HistorySidebarBox = ({
   history,
   onRestoreHistory,
@@ -45,6 +48,7 @@ export const HistorySidebarBox = ({
         {history.map(({ name, time }, i) => (
           <ListItem button dense key={i}>
             <ListItemText
+              style={listItemTextStyle}
               primary={name}
               secondary={moment(time).format("LT")}
             />

src/KeyframesSelectorSidebarBox/index.js

@@ -43,13 +43,14 @@ const KeyframeRow = styled("div")({
   },
 })
 
-const KeyframesSelector = ({
+const KeyframesSelectorSidebarBox = ({
   currentVideoTime,
   keyframes,
   onChangeVideoTime,
   onDeleteKeyframe,
 }) => {
   const keyframeTimes = Object.keys(keyframes).map((t) => parseInt(t))
+
   return (
     <SidebarBoxContainer
       title="Keyframes"
@@ -67,7 +68,7 @@ const KeyframesSelector = ({
           <div className="time">
             {getTimeString(t, 2)}
             <span className="regionCount">
-              ({(keyframes[t].regions || []).length})
+              ({(keyframes[t]?.regions || []).length})
             </span>
           </div>
           <div className="trash">
@@ -85,4 +86,4 @@ const KeyframesSelector = ({
   )
 }
 
-export default KeyframesSelector
+export default KeyframesSelectorSidebarBox