feat(video-annotations): updating redux store for video annotations (#728)

* feat(video-annotatons): updating media annotator test

* feat(video-annotations): addressing PR comments

* feat(video-annotations): fixing linter issues

* feat(video-annotations): adding video support to redux store

* feat(video-annotations): updating comments and adding space

* feat(video-annotations): fixing linter error

Author: bfoxx1906

src/store/annotations/__mocks__/annotationsState.ts

@@ -1,15 +1,27 @@
 import { Annotation } from '../../../@types';
 import { AnnotationsState } from '../types';
 
-const annotationState: AnnotationsState = {
+export const annotationState: AnnotationsState = {
     activeId: null,
     allIds: ['test1', 'test2', 'test3'],
     byId: {
-        test1: { id: 'test1', target: { location: { value: 1 } } } as Annotation,
-        test2: { id: 'test2', target: { location: { value: 1 } } } as Annotation,
-        test3: { id: 'test3', target: { location: { value: 2 } } } as Annotation,
+        test1: { id: 'test1', target: { location: { type: 'page' as const, value: 1 } } } as Annotation,
+        test2: { id: 'test2', target: { location: { type: 'page' as const, value: 1 } } } as Annotation,
+        test3: { id: 'test3', target: { location: { type: 'page' as const, value: 2 } } } as Annotation,
     },
     isInitialized: false,
 };
 
-export default annotationState;
+export const videoAnnotationState: AnnotationsState = {
+    activeId: null,
+    allIds: ['testVid1', 'testVid2', 'testVid3'],
+    byId: {
+        testVid1: { id: 'testVid1', target: { location: { type: 'frame' as const, value: 100 } } } as Annotation,
+        testVid2: { id: 'testVid2', target: { location: { type: 'frame' as const, value: 100 } } } as Annotation,
+        testVid3: { id: 'testVid3', target: { location: { type: 'frame' as const, value: 20 } } } as Annotation,
+    },
+    isInitialized: false,
+};
+
+
+export default { annotationState, videoAnnotationState };

src/store/annotations/__tests__/reducer-test.ts

@@ -1,5 +1,5 @@
 import reducer from '../reducer';
-import state from '../__mocks__/annotationsState';
+import {annotationState as state} from '../__mocks__/annotationsState';
 import { Annotation, AnnotationDrawing, NewAnnotation, PathGroup } from '../../../@types';
 import { APICollection } from '../../../api';
 import {

src/store/annotations/__tests__/selectors-test.ts

@@ -1,4 +1,4 @@
-import annotationsState from '../__mocks__/annotationsState';
+import {annotationState,  videoAnnotationState } from '../__mocks__/annotationsState';
 import {
     getActiveAnnotationId,
     getAnnotation,
@@ -8,7 +8,8 @@ import {
 } from '../selectors';
 
 describe('store/annotations/selectors', () => {
-    const state = { annotations: annotationsState };
+    const state = { annotations: annotationState };
+    const videoState = { annotations: videoAnnotationState };
 
     describe('getAnnotation', () => {
         test('should return an annotation by the specified id', () => {
@@ -33,6 +34,14 @@ describe('store/annotations/selectors', () => {
                 expect.objectContaining({ id: 'test2' }),
             ]);
         });
+
+        test('should return all annotations for video content', () => {
+            expect(getAnnotationsForLocation(videoState, -1)).toEqual([
+                expect.objectContaining({ id: 'testVid1' }),
+                expect.objectContaining({ id: 'testVid2' }),
+                expect.objectContaining({ id: 'testVid3' }),
+            ]);
+        });
     });
 
     describe('getActiveAnnotationId', () => {
@@ -41,7 +50,7 @@ describe('store/annotations/selectors', () => {
         });
 
         test('should get the active id', () => {
-            const newState = { annotations: { ...annotationsState, activeId: '123' } };
+            const newState = { annotations: { ...annotationState, activeId: '123' } };
             expect(getActiveAnnotationId(newState)).toEqual('123');
         });
     });

src/store/annotations/selectors.ts

@@ -1,12 +1,20 @@
 import getProp from 'lodash/get';
 import { Annotation } from '../../@types';
 import { AppState } from '../types';
+import { MEDIA_LOCATION_INDEX } from '../../constants';
 
 type State = Pick<AppState, 'annotations'>;
 
 export const getActiveAnnotationId = ({ annotations }: State): string | null => annotations.activeId;
 export const getAnnotation = ({ annotations }: State, id: string): Annotation | undefined => annotations.byId[id];
 export const getAnnotations = ({ annotations }: State): Annotation[] => [...Object.values(annotations.byId)];
-export const getAnnotationsForLocation = (state: State, location: number): Annotation[] =>
-    getAnnotations(state).filter(annotation => getProp(annotation, 'target.location.value') === location);
+export const getAnnotationsForLocation = (state: State, location: number): Annotation[] => {
+    const annotations = getAnnotations(state);
+    // For video annotations the location will be -1 by default as there is no page number for videos. We will return all of the annotations
+    // and the component will filter them by the current play time of the video.
+    if (location === MEDIA_LOCATION_INDEX) {
+        return annotations;
+    }
+    return annotations.filter(annotation => getProp(annotation, 'target.location.value') === location);
+};
 export const getIsInitialized = ({ annotations }: State): boolean => annotations.isInitialized;

src/store/creator/__mocks__/creatorState.ts

@@ -1,6 +1,6 @@
 import { CreatorStatus } from '../types';
 
-export default {
+export const pageCreatorState = {
     cursor: 0,
     error: null,
     message: 'test',
@@ -15,6 +15,28 @@ export default {
             y: 10,
         },
         type: 'region' as const,
+        targetType: 'page' as const,
+    },
+    status: CreatorStatus.init,
+};
+
+
+export const videoCreatorState = {
+    cursor: 0,
+    error: null,
+    message: 'test',
+    referenceId: '20001',
+    staged: {
+        location: 120,
+        shape: {
+            height: 100, 
+            width: 100,
+            type: 'rect' as const,
+            x: 10,
+            y: 10,
+        },
+        type: 'region' as const,
+        targetType: 'frame' as const,
     },
     status: CreatorStatus.init,
 };

src/store/creator/__tests__/reducer-test.ts

@@ -1,5 +1,5 @@
 import reducer from '../reducer';
-import state from '../__mocks__/creatorState';
+import {pageCreatorState as state} from '../__mocks__/creatorState';
 import { createAnnotationAction } from '../../annotations';
 import { CreatorStatus } from '../types';
 import { NewAnnotation } from '../../../@types';

src/store/creator/__tests__/selectors-test.ts

@@ -1,4 +1,4 @@
-import creatorState from '../__mocks__/creatorState';
+import {pageCreatorState, videoCreatorState} from '../__mocks__/creatorState';
 import { CreatorStatus } from '../types';
 import {
     getCreatorMessage,
@@ -9,7 +9,8 @@ import {
 } from '../selectors';
 
 describe('store/annotations/selectors', () => {
-    const state = { creator: creatorState };
+    const state = { creator: pageCreatorState };
+    const videoState = { creator: videoCreatorState };
 
     describe('getCreatorStatus', () => {
         test('should return the current creator status', () => {
@@ -35,6 +36,24 @@ describe('store/annotations/selectors', () => {
                     "x": 10,
                     "y": 10,
                   },
+                  "targetType": "page",
+                  "type": "region",
+                }
+            `);
+        });
+
+        test('should return the current creator staged item for video content', () => {
+            expect(getCreatorStaged(videoState)).toMatchInlineSnapshot(`
+                Object {
+                  "location": 120,
+                  "shape": Object {
+                    "height": 100,
+                    "type": "rect",
+                    "width": 100,
+                    "x": 10,
+                    "y": 10,
+                  },
+                  "targetType": "frame",
                   "type": "region",
                 }
             `);
@@ -56,6 +75,22 @@ describe('store/annotations/selectors', () => {
             });
             expect(getCreatorStagedForLocation(state, 2)).toEqual(null);
         });
+
+        test('should return the current creator staged item for video content', () => {
+            expect(getCreatorStagedForLocation(videoState, -1)).toMatchObject({
+                location: 120,
+                shape: {
+                    height: 100,
+                    type: 'rect',
+                    width: 100,
+                    x: 10,
+                    y: 10,
+                },
+                type: 'region',
+            });
+
+            expect(getCreatorStagedForLocation(videoState, 1)).toEqual(null);
+        });
     });
 
     describe('getCreatorMessage', () => {

src/store/creator/selectors.ts

@@ -1,4 +1,5 @@
 import { AppState } from '../types';
+import { MEDIA_LOCATION_INDEX } from '../../constants';
 import { CreatorItem, CreatorItemDrawing, CreatorItemHighlight, CreatorItemRegion, CreatorStatus } from './types';
 
 type State = Pick<AppState, 'creator'>;
@@ -9,6 +10,18 @@ export const getCreatorReferenceId = (state: State): string | null => state.crea
 export const getCreatorStaged = (state: State): CreatorItem | null => state.creator.staged;
 export const getCreatorStagedForLocation = (state: State, location: number): CreatorItem | null => {
     const staged = getCreatorStaged(state);
+    // The location is typically a page and this selector was originally meant to only return the staged annotation
+    // (those that have been drawn but not saved) that belong to the page specified by the location. For documents, 
+    // the annotator creates new sets of managers(highlights, drawings, regions) for each page with the current 
+    // page number being the location e.g. page 4 of 10. This selector prevents a staged annotation from staying on 
+    // the screen when a user navigates to a different page. By default, the location value for managers is 1 which is  
+    // why this selector works for images. Video annotations will not work this way because they reference a timestamp, not a page,
+    // and the drawing canvas is the video player which has no pages. In this case, we just need to get the staged annotation and do the 
+    // locaton check for MEDIA_LOCATION_INDEX. The MEDIA_LOCATION_INDEX is a special value, set in the manager, that is used to indicate that 
+    // the this is actually a staged video annotation with a timestamp as its location.
+    if (location === MEDIA_LOCATION_INDEX) {
+        return staged;
+    }
     return staged && staged.location === location ? staged : null;
 };
 export const getCreatorStatus = (state: State): CreatorStatus => state.creator.status;

src/store/eventing/__tests__/init-test.ts

@@ -1,5 +1,5 @@
 import eventManager from '../../../common/EventManager';
-import annotationState from '../../annotations/__mocks__/annotationsState';
+import {annotationState} from '../../annotations/__mocks__/annotationsState';
 import { AppState } from '../../types';
 import { handleAnnotationsInitialized } from '../init';